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本 书 说 明 


Bootstrap 是 2011 年 8 月 Tiwtter 推出 的 开源 前 端 框架 ， 现 在 Bootstrap 已 经 成 为 流行 
的 前 端 UI 框架 , 本 书 着 力 于 Bootstrap 的 内 核 开发 原理 , 通过 大 量 案例 和 讲解 代码 的 方式 ， 
让 读者 能 感受 Bootstrap 的 LESS 文件 应 用 于 自 定 义 样式 的 强大 威力 ， 以 及 掌握 用 
Bootstrap 的 JavaScript 插件 设计 专业 的 用 户 交互 。 案 例 由 浅 入 深 ， 既 各 自 独立 ， 又 环 环 相 
扣 ， 丰 富 的 代码 加 上 细致 的 讲解 ， 让 读者 极 易 上 手 。 

谁 适合 读 这 本 书 

本 书 适合 有 一 定 HTML/CSS 基础 的 开发 人 员 和 爱好 者 阅读 学 习 ， 经 验 丰富 的 开发 人 
员 也 可 以 把 它 当 作 参 考 书 。 

本 书 讲 到 了 Bootstrap 的 jQuery 插件 , 读者 如 果 熟 练 掌握 JavaScript 会 更 好 地 理解 相关 
内 容 。 本 书 将 用 到 SASS 定制 开发 项 目 ， 如 果 熟 悉 CSS 预 处 理 程序 的 读者 会 更 加 牢固 掌 
握 SASS 的 应 用 细节 ， 对 于 不 了 解 这 些 知 识 的 读者 ， 也 能 从 实际 项 目 中 理解 CSS 预 处 理 
程序 的 优势 及 应 用 方法 。 


这 本 书 讲 了 什么 


第 135: 认识 Bootstrap， 初 步 了 解 Bootstrap 及 为 什么 要 使 用 Bootstrap. 

第 2 章 : Bootstrap 框架 基础 ， 讲 解 如 何 下 载 Bootstrap， 以 及 设计 一 个 符合 HTMLS 标 
准 的 网 页 布局 。 

第 3 章 : Bootstrap 栅 格 系统 ， 讲 解 Bootstrap 栅 格 系统 的 固定 布局 、 流 式 布 局 、 响 应 
式 布局 的 知识 。 

第 4 章 : Bootstrap 的 基本 样式 ， 介 绍 Bootstrap 字体 版 式 、 表 格 、 表 单 、 按 钮 、 图 片 
的 基本 样式 引入 。 

第 5 章 : 使 用 Bootstrap 的 组 件 ， 介 绍 Bootstrap 常用 组 件 及 应 用 场景 。 

第 6 章 : LESS 和 SASS, 介绍 目前 最 流行 的 CSS 预 处 理 语言 LESS、SASS 及 Compass 
的 使 用 方法 。 

第 7 章 : 使 用 Bootstrap 插件 ， 介 绍 Bootstrap 插件 的 使 用 方法 。 

第 8 章 : 定制 及 优化 Bootstrap， 介 绍 Bootstrap 的 定制 方法 。 

第 9 章 : 开发 响应 式 企业 网 站 ,创建 一 个 基本 的 企业 门户 网 站 全 程 解析 ， 在 开发 中 会 
应 用 SASS， 从 而 在 实战 中 领略 CSS 预 处 理 的 威力 。 

第 10 章 : 网 站 后 台 管理 系统 ， 解 析 Bootstrap 开发 论坛 后 台 管 理 流程 及 方法 。 


^ € S Kreg hh KARARKA 
| az 
第 11 章 ， 使 用 Bootstrap KUBER, AE TEZA I RNE. 
第 12 章 ，Bootstrap 内 核 解码 ， 在 全 面 掌握 了 Bootstrap 之 后 ， 进 入 一 个 新 的 高 度 ， 从 设 
20 计 者 的 角度 去 学 习 Bootstrap 的 设计 开发 思想 ， 以 便于 应 用 这 些 思 想 开发 自己 的 前 端 框架 。 
在 本 书 的 编写 过 程 中 ， 新 远 尔 〈 北 京 ) 科技 有 限 公司 教研 中 心 通过 岗位 分 析 、 企 业 调 
一 研 ， 力 求 将 最 实用 的 技术 呈现 给 读者 ， 以 达到 我 们 培养 技能 型 专业 人 才 的 目标 。 
本 书 配 有 相关 素材 与 案例 ， 学 习 时 先 阅 读 青 尝试 独立 完成 虽然 我 们 经 过 了 精心 的 编 
， 审 ， 但 也 难免 存在 不 足 之 处 ， 希 望 读者 朋友 提出 宝贵 的 意见 ， 以 使 我 们 的 教材 日 趋 完善 
在 使 用 中 如 果 过 到 问题 请 发 送 邮 件 至 zhowx@itzpark com， 在 此 表示 衷心 的 感谢 。 
技术 改变 生活 ， 新 迈 尔 与 您 一 路 同行 ， 祝 学 习 Bootstrap 的 旅程 愉快 
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近年 来 ， 移 动 互联 网 、 大 数据 、 云 计算 、 物 联网 、 虚 拟 现实 、 机 器 人 、 无 人 驾驶 、 智 
能 制造 等 新 兴 产 业 发 展 迅 速 ， 但 国内 人 才 培 养 却 相对 滞后 ， 存 在 “基础 人 才 多 、 骨 干 人 才 
缺 、 战 略 人 才 稀 ， 人 才 结 构 不 均衡 ”的 突出 问题 ， 这 严重 制约 着 我 国 战略 新 兴 产 业 的 快速 
发 展 。 同 时 ,“ 重 使 用 、 轻 培养 ”的 人 才 观 依然 存在 ， 可 持续 性 培养 机 制 缺乏 。 因 此 ， 建 
立 战 略 新 兴 产业 人 才 培 养 体系 ， 形 成 可 持续 发 展 的 人 才 生 态 环境 刻不容缓 。 

中 关 村 作为 我 国 高 科技 产业 中 心 、 战 略 新 兴 产 业 的 策 源 地 、 创 新 创业 的 高 地 ， 对 全 国 
的 战略 新 兴 产 业 、 创 新 创业 的 发 展 起 着 引领 和 示范 作用 ， 基 于 此 ， 新 迈 尔 〈 北 京 ) 科技 有 
限 公 司 依托 中 关 村 优质 资源 ， 聚 集 高 新 技术 企业 的 技术 总 监 、 架 构 师 、 资 深 工 程 师 ， 共 同 
开发 了 与 面向 行业 紧缺 岗位 相关 的 系列 丛书， 希望 能 缓解 战略 新 兴 产 业 需 要 快速 发 展 与 行 
业 技 术 人 才 匮 乏 之 间 的 矛盾 ， 能 改变 企业 需要 专业 技术 人 才 与 高 校 毕 业 生 的 技术 水 平 不 足 
之 间 的 矛盾 。 

优秀 的 职业 教育 本 质 上 是 一 种 更 直接 面向 企业 、 服 务 产业 、 促 进 就 业 的 教育 ， 是 高 等 
教育 体系 中 与 社会 发 展 联系 最 密切 的 部 分 。 而 职业 教育 的 核心 是 “ 教 ”““ 学 ”“ 习 ”的 有 机 
融合 、 互 相 驱 动 ， 要 做 好 “ 教 ”必须 要 有 优质 的 课程 和 师资 ， 要 做 好 “学 ”必须 要 有 先进 
的 教学 和 学 生 管理 模式 ， 要 做 好 “ 习 ” 必 须要 以 案例 为 核心 , 注重 实践 和 实习 。 新 迈 尔 ( 北 
京 ) 科技 有 限 公司 通过 对 当前 国内 高 等 教育 现状 的 研究 , 结合 国内 外 先进 的 教育 教学 理念 ， 
形成 了 科学 的 教育 产品 设计 理念 、 标 准 化 的 产品 研发 方法 、 先 进 的 教学 模式 和 系统 性 的 学 
生 管 理 体 系 ， 在 我 国 职业 教育 正在 迅速 发 展 、 教 学 改革 日 益 深入 的 今天 ， 新 迈 尔 〈 北 京 ) 
科技 有 限 公司 将 不 断 沉淀 和 推广 先进 的 、 行 之 有 效 的 人 才 培 养 经 验 ， 以 推动 整个 职业 教育 
的 改革 向 纵深 发 展 。 

通过 大 量 企业 调研 ， 目 前 Web 前 端 架构 与 开发 方向 面临 着 人 才 供 不 应 求 的 局 面 , 很 多 
具备 该 技能 的 工程 师 刚刚 入 职 的 起 薪 就 可 以 达到 其 他 行业 平均 工资 的 3~5 倍 ， 本 系列 教 
材 覆 盖 UI Bit. Web 前 端 开发 、PHP 后 台 开 发 等 模块 ， 教 学 和 学 习 目 标 是 让 学 习 者 能 够 
独立 开发 出 商业 网 站 。 

任务 导向 、 案 例 教学 和 注重 实战 经 验 传递 是 本 系列 丛书 的 显著 特点 ， 这 改变 了 先 教 知 
识 后 学 应 用 的 传统 学 习 模式 ， 根 治 了 初学 者 对 技术 类 课程 感到 枯燥 和 茫然 的 学 习 心 态 ， 激 
发 了 学 习 者 的 学 习 兴趣 ， 打 造 学 习 的 成 就 感 ， 建 立 对 所 学 知识 和 技能 的 信心 ， 是 对 传统 学 
习 模 式 的 一 次 改进 。 

Web 前 端 架构 与 开发 系列 从 书 有 以 下 特点 。 

E] ”以 就 业 为 导向 : 根据 企业 岗位 需求 组 织 教学 内 容 ， 就 业 目 的 非常 明确 。 

回 ”以 实用 技能 为 核心 : 以 企业 实战 技术 为 核心 ， 确 保 技 能 的 实用 性 。 
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回 “以 案例 为 主线 : 教材 从 实例 出 发 ， 采 用 任务 驱动 教学 模式 ， 便 于 掌握 ， 提 升 兴趣 ， 


本 质 上 提高 学 习 效 果 。 
200 回 “多 动手 能 力 为 个 格 目标 ， 注重 培养 实践 能 力 ， 以 是 否 能 够 独立 完成 真实 项 目 为 检 
a 验 学 习 效果 的 标准 。 
C 回 “以 项 目 经 验 为 教学 目标 ， 以 大 量 真实 案例 为 教 与 学 的 主要 内 容 ， 完 成 本 课程 的 学 
习 后 ， 相 当 于 在 企业 完成 了 多 个 真实 的 项 目 。 


| 信息 技术 的 快速 发 展 正在 不 断 改变 人 们 的 生活 方式 ， 新 迈 尔 〈 北 京 ) 科技 有 限 公司 也 
| 希望 通过 我 们 全 体 同仁 和 您 的 共同 努力 ， 让 您 真正 掌握 实用 技术 ， 变 成 复合 型 人 才 ， 能 够 
| 实现 高 薪 就 业 和 技术 改变 命运 的 梦想 ， 在 助 您 成 功 的 道路 上 我 们 一 路 同行 。 


新 迈 尔 〈 北 京 ) 科技 有 限 公司 
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第 2 章 
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iKiR Bootstrap 
为 什么 要 学 习 Bootstrap 
Bootstrap 为 何如 此 流行 … 
121 功能 强大 和 样式 美观 的 强 强 联合 … 
122 高度 可 定制 性 … 
123 ”丰富 的 生态 圈 … 
124 布局 兼容 性 良好 
Bootstrap 的 版 本 发 展 … 
1.3.1 Bootstrap 1 === 
1.3.2 Bootstrap 2…… 
1.3.3 Bootstrap 3 
1.3.4 Bootstrap 4 
























Bootstrap 框架 基础 
引入 Bootstrap 
2.1.1 在 自己 的 项 目 中 引入 Bootstrap 
2.1.2 ”添加 Bootstrap 的 class 实现 基本 样式 - 
Bootstrap 的 通用 组 件 调用 
添加 JavaScript 动态 效果 … 
















固定 布局 的 概念 - 
固定 布局 的 栅 格 系统 
流 式 布局 的 栅 格 系统 … 
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| $843 Bootstrap 的 基本 样式 - ps 













| 863 LESS SASS ——— 51 
| 61 为 什么 要 用 CSS 预 处 理 程序 
6.1.1 CSS 不 能 设置 变量 

6.1.2 ”元 余 重 复 的 代码 … 52 

6.1.3 无 法 实现 计算 功能 

6.1.4 ”命名 空间 与 作用 域 - 

6.1.5 CSS 缺陷 总 结 … 

62 LESS 的 应 用 …… 
6.2.1 LESS 介绍 

622 LESS 使 用 基础 

623 ”使 用 变量 … 

624 ”使 用 混合 

62.5 REHU- 
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62.6 ”函数 和 运算 … 57 
6.2.7 LESS 语言 总 结 - 58 


SASS 的 应 用 … 
6.3.1 SASS 介绍 
632 SASS 安装 和 使 用 … 











6.3.8 SASS 总 结 
使 用 SASS 的 扩展 库 Compass - 
6.4.1 Reset 模块 
6.4.2 
6.43 
644 
64.5 





73.2 ”对 话 框 结构 … 
TAA 标签 页 用 法 … 
7.4.2 用 jQuery 实现 标签 页 切换 
工具 提示 条 …… 
7.5.1 用 法 …… 
7.5.2 用 js 使 标签 页 生效 … 
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7.62 FA js 使 弹出 框 生效 … 
提示 信息 
7.7.1 用 法 … 
7.7.2 TR 














7.8.1 按钮 的 Loading 状态 





* VII * 


n € S Bem tre RARE 


782 按钮 组 的 状态 设置 - 





79. 用 法 … 




























E 82 定制 及 优化 Bootstrap 
| 8.1 在 官方 网 站 进行 Bootstrap 定制 


82 修改 源 代 码 定制 Bootstrap 83 
8.3 ”其 他 Bootstrap 资源 …… 86 
本 章 总 结 …… 87 
本 章 作业 …… 88 


| 第 9 章 ， 开 发 响应 式 企业 网 站 
| 91 布局 企业 站 首页 
9.1.1 准备 SASS 
9.1.2 ”构建 页 面 框架 … 
9.2 





9.2.1 设计 index 页 面 导航 … 
922 ”设计 安全 展示 区 
923 ”添加 搜索 栏 ……… 
924 主体 内 容 区 块 … 
92.5 添加 另 一 主体 内 容 区 块 - 
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92.7 ”添加 另 一 个 两 栏 图 文 区 块 - 
9.2.8 添加 footer 区 块 
9.2.9 ”添加 页 面 样式 
9.5 设计 about.html HH … 
9.3.1 保留 页 面 通用 部 分 ， 添 加 about.html 页 面 区 块 … 
9.3.2 ”添加 页 面 主 体 区 块 … 
9.3.3 ”添加 团队 展示 区 块 - 
93.4 添加 另 一 标题 区 块 … 
9.3.5 为 abouthtml 页 面 添 加 样式 … 
9.4 设计 services.html 页 面 
941 保留 页 面 通用 部 分 ， 修 改 主体 页 面 区 块 - 
9.4.2 添加 what we do 区 块 
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第 7 / 章 


认识 Bootstrap 





本 章 主 要 介绍 目前 最 流行 的 前 端 一 体 化 框架 Bootstrap 的 基本 信息 、 使 用 场景 和 使 用 方 
法 。 对 于 互联 网 工具 来 说 ， 借 助 官方 或 者 翻译 好 的 使 用 手册 无 疑 是 工作 中 查询 效率 最 高 的 手 
段 ， 因 此 本 章 着 重 介绍 一 些 实战 中 经 常 出 现 的 问题 和 相应 的 解决 方案 。 








> 了 解 Bootstrap 能 做 什么 、 解 决 了 什么 问题 。 
> 掌握 使 用 Bootstrap 的 方法 。 
> ”掌握 对 Bootstrap 进行 个 性 化 定制 的 方法 。 


| 预习 作业 | 
1 背诵 英文 单词 
请 在 预习 时 找 出 下 列 单词 在 教材 中 的 用 法 ,了解 它们 的 含义 和 发 音 , 并 填写 于 横 线 处 。 
Bootstrap. 
Source. 





Success, 


Primary. 








Ra OO 


av 
Default, 
Info 
‘Warning 











Danger, 
2. 预习 并 回答 以 下 问题 
请 阅读 本 章 内 容 ， 在 作业 本 上 完成 以 下 简 答题 : 
(1) Bootstrap 是 什么 ? 
(2) Bootstrap 为 何如 此 流行 ? 
(3) Bootstrap 2 4 Bootstrap 3 的 区 别 。 
(4) 为 什么 选择 Bootstrap 3? 





1.1 为 什么 要 学 习 Bootstrap 


随 着 移动 设备 的 普及 ， 如 何 让 用 户 通 过 移动 设备 浏览 网 站 时 获得 良好 的 视觉 效果 ， 已 
经 是 一 个 不 可 回避 的 问题 。 响 应 式 Web 设计 就 是 实现 这 个 功能 的 有 效 方法 。 在 这 样 的 大 趋 
势 下 ，Bootstrap 应 运 而 生 。 

Bootstrap 是 现在 最 流行 的 响应 式 UI 框架 ， 它 以 移动 设备 优先 ， 能 够 快速 适应 不 同 设 


| 备 ， 如 图 1.1 所 示 ， 使 用 它 编写 响应 式 页 面 快捷 、 方 便 ， 解 决 了 浏览 器 的 兼容 性 问题 。 使 
| Jl] Bootstrap 后 , 很 多 开发 者 都 会 觉得 自己 再 也 不 想 回 到 使 用 原始 的 CSS 编写 网 页 的 日 子 。 





图 1.1 响应 式 Web 适应 不 同 设备 
Bootstrap 是 Twitter 公司 (www.twitter.com) 于 2011 年 8 月 开源 的 整体 式 前 端 框 架 ， 


| 目的 是 帮助 设计 师 和 Web 前 端 开 发 人 员 快 速 有 效 地 创建 结构 简单 、 性 能 优良 、 页 面 精致 的 


| Web 应 用 程序 。 经 过 短 短 几 个 月 的 时 间 就 红 遍 全 球 ， 大 量 Bootstrap 风格 的 网 站 出 现在 互 
| 联网 的 信息 浪潮 之 中 ， 而 应 用 更 为 广泛 的 是 它 的 后 台 管 理 界面 。 笔 者 近 两 年 接触 的 所 有 互 
| 联网 项 目的 后 台 均 采用 了 Bootstrap 进行 构建 。 


Bootstrap 的 官方 网 站 地 址 是 http://getbootstrap.com/， 界 面 如 图 1.2 所 示 。 可 以 在 官网 
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下 载 最 新 的 版 本 和 详细 的 使 用 说 明文 档 。 目 前 ， 国 内 也 有 不 错 的 Bootstrap 汉化 版 本 ， 7 
是 http://www. bootcss.com/. | 


Bootstrap is the most popular HTML, CSS, and JS framework for 
developing responsive, mobile first projects on the web. 


Download Bootstrap 





图 1.2 Bootstrap 官网 


截止 本 书 印刷 时 ， 最 新 版 本 是 Bootstrap 3.3.7， 当 前 Bootstrap 官网 正在 大 力 宣传 即将 | 
推出 的 新 版 Bootstrap 4。 | 


1.2 Bootstrap 为 何如 此 流行 


1.2.1 功能 强大 和 样式 美观 的 强 强 联合 


Bootstrap 包含 了 绝 大 多 数 的 常用 页 面 组 件 和 动态 效果 , 并 且 是 由 专业 的 网 页 设计 师 精 | 
心 制作 的 ， 非 常 美观 精致 ， 即 使 是 一 个 没有 专业 网 页 设计 师 的 团队 也 可 以 利用 Bootstrap | 
快速 地 构建 简洁 美观 的 页 面 ， 而 在 Bootstrap 出 现 之 前 ， 快 速 和 美观 往往 是 互 斥 的 。 | 

一 些 大 型 互联 网 公司 〈 如 Google、 雅 虎 、 新 浪 、 百 度 等 ) 都 会 有 强大 的 内 部 通用 样式 | 
HERI JavaScript 组 件 库 ， 但 它们 一 方面 是 不 开源 的 ， 另 一 方面 大 部 分 库 都 带 有 这 些 公司 的 ， 
特定 风格 和 烙印 ， 即 使 开源 ， 应 用 面 也 并 不 广泛 。 | 

Bootstrap 使 用 起 来 非常 简单 ， 并 且 有 非常 详尽 的 文档 ， 如 图 1.3 所 示 ， 甚 至 可 以 不 用 | 
查看 代码 ， 只 需 将 文档 当 作 “ 黑 盒 ” 来 使 用 ， 就 可 以 构建 出 相当 漂亮 的 页 面 效果 ， 而 且 样 | 
式 类 的 语义 性 非常 好 ， 根 据 英 文 单词 的 意义 很 容易 记忆 。 | 


1.2.2 高度 可 定制 性 


Bootstrap 的 一 大 优点 是 它 极 佳 的 可 定制 性 , 一 方面 可 以 有 选择 性 地 只 下 载 自己 需要 的 | 
组 件 ， 另 一 方面 在 下 载 前 可 以 调配 参数 来 匹配 自己 的 项 目 ， 如 图 1.4 所 示 。 由 于 Bootstrap | 
是 完全 开源 的 ， 使 用 者 也 可 以 根据 自己 的 需要 来 更 改 代码 。 | 


。3。 


| ~ 响应 式 网 站 开发 实战 








Example 


Toggleabie, contextual menu for displaying lists of links. Made interactive with the dropdown JavaScript plugin. 





| Action 
Note | wm 


Something else here 


Separated link 


«ul class-"dropdown-menu" role-"menu* aria-labelledby-"dropdownenu"» 
<li><a tabindex-"-1" href-"&'»Actionc/a»«/1i» 
<li><a tabindex-"-1" href-"s"»Another actionc/a»«/1i» 
<li><a tabindex-"-1" href="#">Something else here</a></1i> 
| <li class="divider"></li> 
<li><a tabindex-"-1" href-"s"»Separated Link</a></1i> 
</ul> 











图 1.3 Bootstrap 模块 使 用 示例 





Less 文件 全 选 全 部 取消 


选择 和 哪些 Less 文件 编译 到 你 自己 的 定制 Bootstrap 版 本 中 。 不 确定 每 个 文件 的 用 途 吗 ? 请 先 通读 此 文档 中 的 全 局 CSS 
| 样式 和 组 件 章节 。 


| 通用 CSS 组 件 JavaScript 插件 


| I) Print media styles @) Glyphicons [Z] Component animations (for JS) 
| E Typography 回 Button groups | Dropdowns 

| W Code 图 Input groups | Tooltips 

| 团 Grid system V) Navs (Wl Popovers 

| @ Tables V] Navbar | Modals 

| @ Forms | Breadcrumbs @ Carousel 

| 团 Buttons | Pagination 

| IV) Responsive utilities 7) Pager 

| =e 








| 14 “定制 化 选择 界面 
(123 ”丰富 的 生态 医 


Bootstrap 如 此 优秀 ， 于 是 在 Web 开发 领域 出 现 了 很 多 基于 Bootstrap 的 插件 ， 一 些 集 
成 的 CMS 也 开始 应 用 Bootstrap。 例 如 图 标 字 体 插件 Font Awesome、 富 文本 编辑 器 插件 
Bootstrap-wysihtm15, Rails 插件 Bootstrap-sass 等 ， 还 有 很 多 基于 Bootstrap 的 “皮肤 ” 插 
件 ， 避 免 了 Bootstrap 流行 后 同 质 化 (也 就 是 大 量 涌 出 的 Bootstrap 默认 样式 的 网 站 ) 的 严 
重 的 问题 ， 例 如 基于 Window Metro 风格 的 Flat UI、 基 于 Google 风格 的 Google Bootstrap. 
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国内 外 都 有 Bootstrap 的 免费 CDN 加 速 服务 ， 这 更 推动 了 Bootstrap 的 流行 ， 由 于 国内 无 | 
法 使 用 Google 的 CDN， 建 议 使 用 百度 CDN 加 速 服务 : | 
(1) 未 压缩 版 本 


<script src="http://libs.baidu.com/bootstrap/2.0.4/js/bootstrap.js"></script> 





<link href="http://libs.baidu.com/bootstrap/2.0.4/css/bootstrap.css" rel="stylesheet"> | 
| Note 


(2) 压缩 后 的 版 本 


<script src="http://libs.baidu.com/bootstrap/2.0.4/js/bootstrap.min.js"></script> 
<link href-"http://libs.baidu.com/bootstrap/2.0.4/css/bootstrap.min.css" rel="stylesheet"> 


1.24 布局 兼容 性 良好 


虽然 Bootstrap 采用 了 很 多 CSS3 的 效果 ， 但 是 在 布局 上 可 以 兼容 正 7。 使 用 Bootstrap | 
可 以 在 很 大 程度 上 避免 TE 浏览 器 下 的 布局 错乱 。 当 然 ， 在 较 老 版 本 的 TE 浏览 器 下 ， 效 果 | 
会 打 一 些 折 扣 。 | 


1.3 Bootstrap 的 版 本 发 展 


1.3.1 Bootstrap 1 


2011 年 8 H, Twitter 推出 了 用 于 快速 搭建 Web 应 用 程序 的 轻 量 级 前 端 开发 工具 | 
Bootstrap， 该 工具 由 Twitter 的 设计 师 Mark Otto 和 Jacob Thomton 合作 完成 。Bootstrap 是 | 
一 套用 于 开发 Web 应 用 程序 ， 符 合 HTML 和 CSS 简洁 优美 、 规 范 的 库 。Bootstrap 由 动态 | 
CSS 语言 LESS 写成 ,在 很 多 方面 类 似 CSS 框架 Blueprint。 经 过 编译 后 ，Bootstrap 就 是 众 | 
多 CSS 的 合集 。 l 

Bootstrap 的 内 置 样式 继承 了 Mark Otto 简洁 亮丽 的 设计 风格 ， 便 于 开发 团队 快速 部 署 | 
一 个 外 观 尚 可 的 Web 应 用 程序 。 对 于 普遍 缺乏 优秀 前 端 开 发 人 员 的 创业 团队 来 说 ， 在 某 | 
种 程度 上 Bootstrap 可 以 让 他 们 在 没有 设计 师 的 情况 下 完成 一 个 UI 较为 理想 的 作品 。 | 


1.3.2 Bootstrap 2 


2012 年 1 月 ，Twitter 在 开发 者 博客 上 公布 消息 ， 其 6 个 月 前 发 布 的 轻 量 级 前 端 开发 | 
工具 Bootstrap 迎 来 重大 改进 ， 正 式 升级 为 Bootstrap 2。 和 Bootstrap 1 一 样 ，Bootstrap 2 仍 | 
然 是 一 个 托管 在 GitHub 上 的 开源 项 目 。 | 

在 开发 Bootstrap 2 的 过 程 中 ，Mark Otto 参考 了 不 少 来 自 社区 的 意见 并 借鉴 了 自己 在 | 
Twitter 前 端 重 新 设计 过 程 中 积累 的 经 验 。 除 了 增加 新 样式 外 ，Bootstrap 2 修改 了 一 些 网 页 | 
元 素 的 默认 样式 ， 除 去 了 上 一 版 本 中 的 几 十 个 bug， 同 时 完善 了 说 明文 档 。BootStrap 2 在 | 
原 有 特性 的 基础 上 着 重 改 进 了 用 户 的 体验 和 交互 性 ， 如 新 增加 的 媒体 展示 功能 ， 适 用 于 智 | 
能 手机 上 多 种 屏幕 规格 的 响应 式 布局 ， 另 外 还 新 增 了 12 xk iQuery 插件 ， 可 以 满足 Web 页 | 
面 常用 的 用 户 体验 和 交互 功能 。 | 
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| -— 
| Bootstrap 2 的 一 个 重大 改进 是 添加 了 响应 式 设计 特性 ，Bootstrap 1 中 并 不 支持 这 一 特 
| 性 ， 这 让 很 多 开发 人 员 不满 。 为 了 提供 更 好 的 针对 移动 设备 的 响应 式 设计 方案 ，Bootstrap 2 
, | 采用 了 更 为 灵活 的 12 栏 栅 格 布局 。 此 外 ， 它 还 更 新 了 一 些 进度 栏 以 及 可 定制 的 图 片 缩 略 
| 图 ， 并 增加 了 一 些 新 样式 。 值 得 关注 的 是 ，Bootstrap 是 一 个 非常 轻 量 级 的 框架 ，Bootstrap 2 
在 压缩 后 也 只 有 10KB。 
Bootstrap 2 采用 了 更 灵活 也 更 受 欢迎 的 12 栏 棚 格 布局 ， 并 以 此 来 实现 其 各 种 布局 杠 
| 架 ; 增加 了 响应 式 设 计 ， 以 适应 各 种 移动 终端 的 需求 ; 完善 和 改进 了 原 有 样式 库 ， 并 提供 
| 了 更 丰富 的 新 样式 ， 包 括 样式 繁多 的 图 标 、 漂 亮 易 用 的 进度 条 等 ;改进 和 增加 了 自 定 义 
| iQuery 插件 ， 完 善文 档 ， 修 复 bug， 同 时 还 提供 了 很 多 基于 Bootstrap 构建 的 网 站 样 例 。 已 
| 经 使 用 Bootstrap 14 的 开发 者 也 不 用 担心 ，Bootstrap 专门 提供 了 从 Bootstrap 1 升级 到 
| Bootstrap 2 的 手工 向 导 来 帮助 用 户 升级 。 
| Bootstrap 2 对 现 有 框架 进行 了 清晰 的 功能 划分 ， 主 要 分 为 脚手架 (Scaffolding), Hih 
CSS、 构 件 库 和 jQuery 插件 库 。 
| M Scaffolding 主要 提供 基于 网 格 的 各 种 布局 ， 包 括 普 通 栅 格 系统 、 贬 入 式 栅 格 、 
定 布局 、 自 适应 布局 ， 同 时 可 以 自 定义 网 格 和 布局 。Bootstrap 2 提供 了 响应 式 设 
计 ， 可 以 通过 单个 文件 支持 各 种 手持 设备 ， 自 适应 不 同 的 设备 和 屏幕 变化 。 
M ”基础 CSS 包括 各 种 排版 样式 标题、 段落 、 引 用 块 、 列 表 、 内 联 标签 等 ) ， 在 代 
码 展示 方面 提供 了 基于 code 标签 的 内 典 代 码 ， 基 于 pre 的 块 代码 和 基于 Google 
Prettify 的 代码 样式 。 此 外 ， 提 供 各 种 表格 、 表 单 、 按 钮 、 图 标的 展示 方式 。 
EI ”构件 库 提供 了 基于 按钮 、 导 航 、 标 签 、 排 版 、 警 告 、 进 度 栏 、 图 像 网 格 等 控件 。 
回 jQuery 插件 库 则 提供 了 十 几 种 插件 来 实现 动态 效果 ， 例 如 模 态 对 话 框 、 下 拉 项 、 
标签 页 、 工 具 提示 、 弹 出 提示 、 轮 播 等 ， 开 发 者 可 以 根据 自己 的 业务 需求 使 用 不 
同 的 插件 实现 各 种 动态 效果 。 
| 应 用 Bootstrap 2 的 案例 有 NASA (如 图 1.5 所 示 ) 和 MSNBC 的 BREAKING NEWS (如 
| 图 1.6 所 示 )。 
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图 1.6 Bootstrap 2 的 应 用 案例 BREAKING NEWS 


1.3.3 Bootstrap 3 


自 2012 年 12 月 Bootstrap 2.2.2 发 布 后 ， 开 发 团队 开始 将 精力 放 在 下 一 个 主要 版 本 | 
Bootstrap 3 的 研发 上 。 该 团队 在 博客 中 透露 了 Bootstrap 3 版 本 的 开发 计划 Chttp://blog. | 


getbootstrap.com/2012/12/ 10/bootstrap-3-plans/) « 
度 ， 而 且 体现 了 社区 所 做 出 的 努力 。 该 版 本 的 开发 计划 如 下 : 

E] Xf twitter/bootstrap. twitter/bootstrap-server 和 mdo/bootstrap-blog (一 个 私有 库 ) 
迁移 到 twbs。 

更 改 网 站 URL 为 http://getbootstrap.com， 之 前 为 跳 转 URL. 

将 所 有 LESS 代码 (包括 响应 样式 ) 编译 到 一 个 单独 的 CSS 文件 中 。 

完全 放弃 对 IE7. Firefox 3.x 的 支持 。 

使 用 @font-face 版 本 的 Glyphicons 图 标 ， 代 蔡 先 前 的 PNG 目标 。 

采用 MIT 许可 证 ， 代 蔡 先前 的 Apache 许可 证 。 

放弃 *-wip 分 支 样式 的 开发 。 


EREKEKEKRKRER 


合并 到 主 分 支 。 


Bootstrap 3 将 主要 致力 于 对 之 前 版 本 的 改善 ,将 放弃 一 些 旧 代码 ,改善 CSS 的 响应 速 | 


所 有 版 本 下 载 均 使 用 标签 ， 开 发 工作 采用 更 为 细小 的 功能 分 支 ， 并 在 3.0 发 布 后 | 


2013 年 3 月 ， Bootstrap 发 布 了 最 新 的 预览 版 本 ,标签 为 Bootstrap 3， 这 是 它 的 第 三 个 | 
主要 发 行 版 本 。 该 版 本 的 主要 更 新 Chttps:/github.com/twitter/bootstrap/pull6342) 与 开发 计 | 


划 基 本 一 致 ， 只 是 还 改进 了 响应 式 CSS， 其 中 不 乏 来 自 社区 的 贡献 。 


当前 的 预览 版 本 ， 到 Bootstrap 3 正式 版 发 布 时 还 会 有 更 多 的 改进 。 该 版 本 被 标签 为 “ 移 | 
动 优先 ” 因为 进行 了 完全 重 写 ， 以 更 好 地 适应 手机 浏览 器 。 移动 的 风格 可 直接 从 库 中 感受 到 。 
其 他 的 改变 还 包括 转换 文档 到 Jekyll EX Mustache， 重 做 插图 ， 更 新 支持 Retina 的 示 | 
HAR, 重新 设计 图 标 预 览 , 更 新 所 有 示例 以 演示 新 的 改进 ,通过 插件 改进 noConflict 等 。 | 


Ya 


， 此 外 ，Bootsttap 3 还 包含 一 些 其 他 重要 的 改进 。 
| 1.3.4 Bootstrap 4 
«| 
C^] ERM, Bootstrap 4 正在 开发 ， 包 含 大 量 新 特性 ， 这 将 需要 很 长 时 间 来 开发， 不 
| 


过 可 以 先 从 内 测 版 开始 测试 。 
a Note | 完整 的 介绍 内 容 参见 http://blog.getbootstrap.com/2015/12/08/bootstrap-4-alpha-2/. 4 
， 可 以 从 网 址 http://wikijikexueyuan.com/project/bootstrap4/ 获 取 Bootstrap 4 预览 版 本 。 


| 本 章 SH 


目前 Bootstrap 的 版 本 已 经 发 展 到 了 Bootstrap 3。 不 过 这 并 不 意味 着 Bootstrap 2 已 退 
出 了 历史 舞台 。Bootstrap 3 在 样式 上 采用 了 扁平 化 的 风格 ，Bootstrap 2 在 按钮 、 工 具 栏 等 
位 置 更 多 地 采用 了 立体 的 效果 。 它 们 之 间 并 没有 熟 优 熟 劣 的 区 别 ， 更 多 的 是 设计 风格 的 不 
同 。 使 用 者 应 该 根据 自己 项 目的 实际 需求 来 决定 使 用 哪 一 个 版 本 。 

1.7 是 Bootstrap 2 和 Bootstrap 3 的 按钮 样式 对 比 , 可 以 发 现 Bootstrap 2 的 按钮 有 明 


|， 显 的 凸 起 效果 。 


| Bootstrap 2 的 按钮 样式 


| Bootstrap 3 的 按钮 样式 





图 1.7 Bootstrap 2 和 Bootstrap 3 中 的 按钮 对 比 效果 
A Ë Ma 


| 
| 
| 1. 为 什么 使 用 Bootstrap? 

| 2. 如 何在 项 目 中 引入 Bootstrap? 
| 3. Bootstrap 2 和 Bootstrap 3 的 区 别 是 什么 ? 





。8。 
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Bootstrap 框架 基础 





当 开 发 工程 师 拿 到 一 个 开源 框架 时 ， 如 何 引入 这 个 框架 ， 如 何 调用 其 中 的 组 件 ， 这 些 
是 他 们 最 关心 的 问题 。 本 章 以 这 些 问 题 为 切入 点 ， 主 要 介绍 Bootstrap 的 基本 信息 、 使 用 
场景 和 使 用 方法 。 对 于 互联 网 工具 来 说 ， 借 助 官方 或 者 翻译 好 的 使 用 手册 无 疑 是 工作 中 查 
询 效率 最 高 的 手段 ， 因 此 本 章 会 更 多 地 依据 笔者 的 使 用 经 验 ， 筛 选 出 重点 ， 着 重 介绍 一 些 














> 在 自己 的 项 目 中 引入 Bootstrap 及 添加 实现 基本 样式 。 
> 调用 Bootstrap 的 通用 组 件 。 
> 调用 Bootstrap 的 插件 。 


cern 


l. 背诵 英文 单词 

请 在 预习 时 找 出 下 列 单词 在 教材 中 的 用 法 , 了解 它 们 的 含义 和 发 音 , 并 填写 于 横 线 处 。 
Table. 
Striped 
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Navnavbar 
Profile 
Toggle 


Gr | Setting 
| Message. 
peron 


请 阅读 本 章 内 容 ， 在 作业 本 上 完成 以 下 简 答 题 : 
(1) 如 何在 自己 的 项 目 中 引入 Bootstrap? 
(2) 如 何 调用 Bootstrap 的 默认 样式 ? 
(3) 如 何 添加 Bootstrap 的 JS 动态 效果 ? 

















2.1 引入 Bootstrap 


(244 在 自己 的 项 目 中 引入 Bootstrap 


| Bootstrap 的 源 代码 是 使 用 CSS 的 预 编 译 语言 LESS 编写 的 ， 关 于 LESS， 本 书后 面 会 
| 详细 介绍 ， 不 过 Bootstrap 最 后 需要 使 用 的 是 编译 好 的 CSS 文件 。 

| 官方 网 站 提供 两 个 下 载 入 口 ,一 个 是 首页 的 Download Bootstrap 按钮 ， 如 图 2.1 所 示 ， 
| 另 一 个 是 首部 导航 栏 的 Customize， 这 里 可 以 提供 定制 化 的 下 载 。 一 般 情况 下 ， 建 议 直 接 
| 全 部 下 载 ， 在 开发 基本 完成 后 ， 再 考虑 根据 实际 的 使 用 情况 进行 定制 化 下 载 ， 以 缩减 前 端 
| RE. Bootstrap 目录 结构 如 下 所 示 : 


Download 


Bootstrap (currently v3.3.7) has a few easy ways to quickly get started, each one appealing 
to a different skill level and use case. Read through to see what suits your particular needs. 





Bootstrap Source code Sass 
Compiled and minified CSS, JavaScript. Source Less, JavaScript, and font fies, Bootstrap ported from Less to Sass for 
and fonts. No docs or original source files along with our docs. Requires a Less easy inclusion in Rails, Compass, or 
are included. compiler and some setup. Sass-only projects. 

Download aoosrep | > Download source Download Sass 














2.1 Bootstrap 下 载 页 面 


bootstrap 
| css 





| bootstrap.css 
bootstrap.min.css 


bootstrap.css.map 





bootstrap-theme.css 


*10* 


32 章 Bootstrap 框架 基础 





| | bootstrap-theme.min.css 

| . bootstrap-theme.css.map 

| fonts 

| | glyphiconshalflings-regular.eot 
| | glyphiconshalflings-regular.svg 
| . glyphiconshalflings-regular.ttf 

|  glyphiconshalflings-regular.woff 
| js 

| | bootstrap.js 








bootstrap.min.js 





解压 Bootstrap.zip 文件 并 将 其 中 的 内 容 复 制 到 项 目 目录 中 , 下 一 步 就 是 在 HTML 文件 | 


中 包含 CSS 和 JavaScript 文件 。 在 HTML 项 目 中 引入 Bootstrap 的 方法 很 简单 ， 和 引入 其 | 
他 CSS 或 JavaScript 文件 一 样 ， 使 用 <script> 标 签 引入 JavaScript 文件 ， 使 用 <link> 标 签 引 | 
入 CSS 文件。 不 过 需要 注意 的 是 ，Bootstrap 的 JavaScript 效果 全 部 都 是 基于 jQuery 的 ， | 


此 如 果 需 要 使 用 Bootstrap 的 JavaScript 动态 效果 ， 就 必须 先 引 入 jQuery. 
示例 1: 


<head> 
<link href-"css/bootstrap.css" rel="stylesheet"> 
</head> 
<body> 
<scriptsrc="js/jQuery.js"></script> 
<scriptsrc="js/bootstrap.js"></script> 
</body> 


注意 : JavaScript 文件 放 在 文档 尾 会 有 助 于 提高 加 载 速度 。 


引入 Bootstrap 还 可 以 使 用 第 三 方 的 CDN 服务 , Bootstrap 2 版 本 可 以 使 用 百度 的 CDN ， 
服务 ; Bootstrap 3 版 本 建议 使 用 Bootstrap 中 文 网 提供 的 CDN， 网 址 是 http:/open. | 


bootcss.com/; 当然 如 果 是 做 国外 的 项 目 ， 首 选 Google 的 CDN 服务 。 
2.1.2 添加 Bootstrap 的 class 实现 基本 样式 
以 编写 表格 为 例 ， 如 果 不 使 用 Bootstrap 或 其 他 类 似 的 框架 ， 有 以 下 两 步 : 


CL) 第 一 步 构思 设计 表格 的 样式 ， 包 括 宽度 、 高 度 、 行 高 、 对 齐 方式 、 边 框 等 很 多 | 


属性 。 如 果 一 开始 的 设想 与 实际 效果 并 不 符合 ， 还 需要 后 面 不 断 地 调试 。 


(2) 第 二 步 需要 编写 相应 的 HTML/CSS 代码 ， 边 写 边 调试 ， 还 要 边 思考 如 何 给 id 或 |] 


class 命名 ， 最 后 可 能 还 需要 上 司 或 者 同事 进行 考核 。 


如 果 要 使 用 Bootstrap， 那 么 只 需要 引入 Bootstrap， 然 后 在 <table> 标 签 中 添加 一 个 


class="table"， 就 可 以 获得 Bootstrap 设 定 好 的 表格 样式 ， 示 例 代码 如 下 : 


eM. 


az 
示例 2: 


<table class="table"> /* 只 需要 添加 class="table" Bll A] */ 
£d E 
eX <th> 姓 名 </th> 
| <th> 年 龄 </th> 


oe 
! «hr 


«tr^ 
«td» 2E WEAR <td> 
<td>18<td> 
<td> 程 序 员 <td> 

</tr> 

</table> 


效果 如 图 2.2 所 示 。 


Rn OO 





图 2.2 Bootstrap 的 表格 样式 


| “49%, Bootstrap 不 会 死板 地 只 提供 一 种 样式 ， 对 于 表格 来 说 ， 还 可 以 通过 添加 table- 
| striped 类 来 添加 斑马 纹 ， 添 加 table-bordered 来 为 表格 加 上 边框 和 圆 角 ， 如 图 2.3 所 示 。 





2.3” 带 斑马 线 和 边框 的 表格 


2.2 Bootstrap 的 通用 组 件 调用 


| 除了 添加 class 的 方式 外 ， 在 布局 方面 ， 只 要 class 命名 和 嵌 套 结构 符合 约定 ， 就 可 以 
| 轻松 地 构建 出 一 些 通 用 组 件 。 下 面 以 导航 条 为 例 进行 介绍 。 
”示例 3: 
<ul class="navnavbar-nav"> 
<li><a href="#"> 1 W</a></li> 
<li><a href="#">j* f s «alli 
<li><a href="#"> FRÍI</a></Nli> 
<li><a hre 仁 "#"> 联 系 我 们 </a></li> 
<ul> 
| 只 要 符合 ulnavnavbar-nav>li 这 样 的 HTML 文档 结构 ,就 可 以 构建 出 一 个 顶部 导航 条 ， 
| 效果 如 图 2.4 所 示 。 


.12* 


第 2 章 Bootstrap 框架 基础 








首页 产品 展示 。 “关于 我 们 。 “联系 我 们 





24 顶部 导航 条 


| & 
2.3 添加 JavaScript 动态 效果 


对 于 Bootstrap 中 的 JavaScript 效果 的 添加 ， 一 方面 需要 根据 文档 编写 特定 的 HIML 结 | 
构 ， 另 一 方面 需要 调用 JavaScript 插件 。 下 面 以 标签 切换 效果 为 例 来 讲解 ， 如 图 2.5 所 示 。 





图 2.5 标签 切换 页 


示例 4: 


<ul class="navnav-tabs"> 
<li class="active"><a href="#home" data-toggle="tab"> 首 页 </a></li> 
<li class=""><a href="#profile" data-toggle="tab"> 概 述 </a></li> 
<li class=""><a href-"fmessages" data-togegle="tab"> 信 息 </a></li> 
<li class=""><a href="#settings" data-toggle="tab"> 设 置 </a></li> 
</ul> 


<!--href 属性 的 值 要 和 后 面 tab-pine 中 的 id 值 对 应 --> 


<div class="tab-content"> 

«div class="tab-pane active" id="home"> 我 是 首页 内 容 </div> 

<div class="tab-pane" id="profile"> 我 是 概述 </div> 

<div class="tab-pane" id="messages"> 我 是 信息 </div> 

<div class="tab-pane" id="settings"> 我 是 设置 </div> 
</div> i 
JavaScript 插件 的 调用 一 般 有 两 种 方式 : 一 种 采用 Bootstrap 自 带 的 触发 规则 ， 在 标签 | 
中 添加 data-toggle="tab" 这 样 的 属性 来 实现 ， 这 种 方式 的 好 处 是 无 须 编 写 任何 JavaScript f& | 
码 就 可 以 实现 功能 ， 另 一 种 则 类 似 变通 jQuery 插件 的 调用 方式 ， 例 如 以 下 代码 。 | 


«div id="myTabs"> 
«ul class="navnay-tabs"> 
<li class="active"><a hre 仁 "#home1"> 首 页 </a></li> 
<li class=""><a href="#profile1">##i&</a></li> 
<li class=""><a href="#messages1">{a §</a></li> 
<li class=""><a hre 仁 "#settings1"> 设 置 </a></li> 
< 


<!--href 属性 的 值 要 和 后 面 tab-pine 中 的 id 值 对 应 --> 
<div class="tab-content"> 
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a 
<div class="tab-pane active" id="home1"> 我 是 首页 内 容 </div> 
<div class="tab-pane" id="profile1"> 我 是 概述 </div> 

<div class="tab-pane" id="messages1"> 我 是 信息 </div> 

<div class="tab-pane" id="settings1"> 我 是 设置 </div> 


Gf) a 


</div> 


jQuery 插件 实现 的 标签 切换 页 如 图 2.6 所 示 。 
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图 26 jQuery 插件 实现 的 标签 切换 页 
本 章 总 结 


| 本 章 对 Bootstrap 进行 了 概述 ， 需 要 了 解 的 是 : 在 项 目 中 如 何 引 入 Bootstrap? 如 何 应 
| 用 Bootstrap 默认 组 件 ? 以 及 Bootstrap 如 何 调用 jQuery 插件 ? HUE Bootstrap 的 设计 思 
| 想 : Bootstrap 是 让 Web 开发 变 得 更 好 、 更 快 、 更 强 的 最 佳 实 践 。 本 章 的 学 习 将 为 以 后 正 
， 式 在 项 目 中 应 用 Bootstrap 打下 良好 的 基础 。 


RSH 


1. 用 Bootstrap 实现 一 个 隔行 变色 的 表格 ， 如 图 2.7 所 示 。 





名 称 城市 邮编 

BR 北京 100000 
au bs 200000 
55 x 300000 
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2. 用 Bootstrap 实现 一 个 选项 卡 切换 效果 ， 如 图 2.8 所 示 。 





HTML5 | iOS Java 


HTML5 是 下 一 代 的 HTML. 标准 通用 标记 语言 下 的 一 个 应 用 超 文本 标记 语言 《HTML》 的 第 五 次 重大 修改 。 





2.8 选项 卡 切换 效果 


.14 。 
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页 面 的 布局 历经 二 十 多 年 的 发 展 ， 已 经 被 前 人 总 结 成 大 体 的 实用 设计 方法 和 辅助 工 
具 ， 本 章 将 介绍 当前 流行 的 布局 设计 ， 以 及 用 于 辅助 布局 的 栅 格 系统 。 

本 章 包 括 以 下 主要 内 容 : 

> 常用 的 固定 布局 设计 与 960 Ws E d. 

> ”响应 式 设计 与 媒介 查询 的 应 用 。 

> Bootstrap 固定 布局 栅 格 系统 、 流 式 布局 栅 格 系统 、 响 应 式 布局 栅 格 系统 。 


pcs] 


掌握 Bootstrap 栅 格 系统 的 国定 布局 、 流 式 布局 、 响 应 式 布局 的 知识 。 


| 本 章 技能 目标 | 


> 了解 什么 是 栅 格 系统 。 

> 掌握 使 用 Bootstrap 固定 布局 栅 格 系统 。 
> FE Bootstrap 流 式 布局 栅 格 系统 。 

> 掌握 Bootstrap 响应 式 布 局 栅 格 系统 。 





l. FARAH 
请 在 预习 时 找 出 下 列 单词 在 教材 中 的 用 法 ， 了解 它们 的 含义 和 发 音 , 并 填写 于 横 线 处 。 
Grid. 











2 Dou ht RAGA KIA 


System. 
fluid 
Responsive. 

2， 预 习 并 回答 以 下 问题 

请 阅读 本 章 内 容 ， 在 作业 本 上 完成 以 下 简 答题 : 

(1) 什么 是 960 栅 格 系统 ? 

(2) 什么 是 响应 式 布局 ? 

(3) Bootstrap 国定 布局 顶 格 系统 、 流 式 布局 栅 格 系统 、 响 应 式 布 局 栅 格 系统 的 区 别 。 
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固定 布局 就 是 指 各 个 部 分 都 采用 固定 宽度 的 页 面 布局 ， 如 果 缩 放 页 面 到 窗口 宽度 小 于 


| 页 面 宽度 时 ， 就 会 导致 部 分 内 容 不 可 见 ， 必 须 通过 拖 动 滚动 条 才 可 以 浏览 全 部 内 容 。 


虽然 移动 互联 网 来 势 油 涌 ， 响 应 式 、 流 式 布局 开始 逐渐 流行 , 但 是 在 很 多 应 用 场景 下 ， 


| 固定 布局 仍 是 最 合适 的 。 例 如 B/S 结构 的 企业 应 用 、 海 报 宣传 性 质 的 页 面 等 。 而 固定 布局 
| 的 稳定 、 简 单 、 成 熟 也 是 前 端 技术 造型 中 重要 的 考量 。 


在 开发 流程 中 , 固定 布局 也 是 成 熟 而 稳定 的 ， 从 产品 经 理 的 草图 到 设计 师 的 PSD 设计 


， 稿 ， 再 到 前 端 页 面 ， 全 部 是 静态 的 ， 思 路 的 传递 简单 明了 、 成 本 低廉 。 相 对 来 说 ， 响 应 式 
| REME HTML/CSS 编写 上 更 为 复杂 ， 而 且 对 产品 经 理 和 设计 师 的 能 力 素质 、 沟 通 表 
， 达 都 有 更 高 的 要 求 ， 需 要 更 多 的 沟通 成 本 。 


开发 者 不 应 盲目 追求 概念 ， 更 需要 根据 团队 的 情况 、 产 品 的 需求 、 成 本 考量 来 综合 考虑 


| 技术 的 选 型 。 因 此 笔者 认为 即使 移动 风潮 油 涌 , 固定 布局 很 多 场合 下 仍然 不 失 为 合适 的 选择 。 


大 多 数 信息 内 容 都 较为 复杂 ， 以 内 容 组 织 为 主 的 网 站 都 采用 了 居中 950/960 像素 的 


| <div> 元 素来 包 庄 页 面 的 主体 内 容 。 例 如 前 两 年 的 雅虎 、 淘 宝 、 新 浪 、 搜 狐 都 是 950 像素 ; 
| MySpace, tii. AOL 是 960 像素 (目前 这 些 网 站 大 都 经 历 了 改版 ， 例 如 AOL 就 已 经 是 
”响应 式 的 ， 如 图 3.1 所 示 )。 








2016+ELECTIO 


























图 3.1 AOL 的 PC 平板 手机 的 显示 
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为 什么 这 些 网 站 都 不 约 而 同 地 选择 了 这 样 的 布局 方式 呢 ? 一 种 说 法 是 在 早期 电脑 屏 | 
幕 大 多 为 1024x768 的 分 辩 率 时 ， 打 开 Firefox 默认 状态 ， 窗 体 的 大 小 约 为 974X650, WH | 
左右 边框 的 宽度 ， 宽 度 大 致 就 在 960 像素 左右 。 | 

为 什么 不 是 961 像素 或 者 是 957 像素 这 样 的 值 呢 ? 除了 整数 好 记 以 外 ， 还 有 一 些 数学 | &Y ) 
上 的 原因 。 | 

960 可 以 分 解 为 2 的 6 次 方 乘 以 3 和 5， 这 样 可 以 分 割 成 以 下 宽度 的 整数 倍 : 2，3，4， 
5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, | 
240, 320, 480. | 

整数 倍 共 26 种 ， 可 标记 为 : 

N(960)-N(2^6x5x3) | 

根据 数学 归纳 可 以 得 到 一 个 有 趣 的 结论 ， 要 使 得 N(width) 最 大 ，width 的 取 值 必 须 是 | 
480、960 和 1920。 | 

NN 越 大 ， 可 组 合 的 宽度 值 就 越 多 。 对 栅 格 系统 来 说 ， 这 意味 着 越 灵活 ! | 

目前 绝 大 多 数 显 示 器 都 支持 1024x768 及 其 上 的 分 辨 率 ，480 KE, 1920 WAR CK | 
宽 不 利于 阅读 )， 因 此 960 就 成 为 网 页 栅 格 系统 中 的 最 佳 宽度 。 | 

至 于 950 像素 和 960 像素 其 实 并 没有 本 质 上 的 区 别 ， 只 是 对 左右 外 边 距 的 设置 不 同 ， 
如 果 算 上 外 边 距 的 值 ， 加 起 来 也 是 960 像素 。 


3.2 固定 布局 的 椭 格 系统 


1. 基础 用 法 


Bootstrap 2 默认 不 自 带 响应 式 固定 布局 的 12 列 棚 格 系统 。 栅 格 的 宽度 为 60 像素 , 分 
隔 宽度 为 20 像素 ， 总 宽度 为 940 像素 〈 不 计算 最 左 侧 的 分 隔 宽度 )。 | 
绝 大 多 数 的 网 站 的 内 容 都 是 居中 布置 的 ，Bootstrap 2 对 此 提供 了 一 个 让 网 站 内 容 居中 
的 “容器 ”。 可 以 通过 添加 class="container" 来 使 用 。 为 了 配合 Bootstrap 2 内 置 的 12 列国 | 
定 布局 栅 格 ,“ 容 器 ”的 宽度 默认 为 940 像素 。 | 
固定 栅 格 使 用 起 来 非常 简单 ， 如 下 面 的 代码 : 
<divclass"container"> 
<div class="row"> 
<div class="span3"> 
<!-- 构 建 左 侧 导航 --> 
</div> 
<div class="span9"> 
<!-- 构 建 右 侧 导航 --> 
</div> 
</div> 
</div> 
注意 : 在 使 用 栅 格 时 需要 在 外 边 包 训 class-"row" 76A. | 
如 果 外 层 的 栅 格 数 等 于 内 层 的 栅 格 数 总 和 时 , 必须 使 用 class="row", 否则 会 造成 折 行 ， | 
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| DL span12 和 container 为 例 , 它们 都 不 包含 最 左边 的 外 边 距 的 宽度 ,而 span3+span9 则 会 多 
出 来 一 个 20 像 素 的 分 隔 宽 度 ,而 添加 <div class-"row"> 会 自动 加 上 这 20 像素 , 即 <div class= 


。 "tow"> 宽 度 为 960 像素 。 
国内 Bootstrap 3 中 不 再 提供 非 响应 式 的 固定 布局 ， 如 果 要 禁用 响应 式 布局 ， 请 执行 以 下 操作 ， 
- | 不 要 添加 viewport<meta>。 
通过 .container 设置 一 个 width 值 从 而 覆盖 框架 的 默认 width 设置 ， 例 如 “width:970px 
| 'important; ”。 


如 果 使 用 导航 条 ， 需 要 移 除 所 有 导航 条 的 折 倒 和 展开 行为 。 
| 对 于 栅 格 布局 ， 额 外 增加 .col-xs-* 的 类 或 替换 掉 .col-md-* 和 .col-lg-*， 针 对 超 小 屏幕 设 
| 备 的 栅 格 系统 能 够 在 所 有 分 辨 率 的 环境 下 展开 。 
2， 设置 偏 移 量 


| 栅 格 系统 的 意义 之 一 就 是 统一 网 站 的 布局 宽度 和 间距 ， 便 于 信息 的 组 织 和 代码 的 维 
| 护 ， 由 于 阅读 是 从 左 至 右 进行 的 ， 因 此 在 编写 代码 中 经 常 需要 设置 margin-left 属性 来 指定 
元 素 的 偏 移 量 , 而 使 用 了 栅 格 系统 后 , margin-left 的 值 往往 是 固定 的 几 个 值 , 因此 Bootstrap 
| 提供 了 offset 类 来 帮助 开发 者 ， 无 须 测量 ， 也 无 须 编写 任何 CSS 代码 就 可 以 方便 地 设置 偏 
(ga. 
| 每 个 类 都 给 列 的 左边 距 增加 了 指定 单位 的 列 。 例 如 ，offset3 将 元 素 右 移 了 3 个 列 的 宽度 : 
| <div class="row"> 

<div class="span4">+++</div> 

<div class="span3 offset3">-+-</div> 

</div> 


3.3 AA A He & i 


| 固定 布局 的 栅 格 系统 采用 固定 宽度 的 栅 格 宽度 、 分 隔 宽度 、 偏 移 量 ， 而 对 于 一 些 需 要 
， 自 适应 的 场景 ， 使 用 百分比 作为 宽度 是 更 好 的 选择 ， 这 种 布局 方式 一 般 称 作 流 式 布局 。 
| 将 固定 布局 中 外 层 的 -row 类 替换 为 row-fhuid 类 , 就 可 以 实现 流 式 布局 的 栅 格 系统 , 应 
| 用 于 每 一 列 的 类 不 用 改变 ， 这 样 能 方便 地 在 流 式 与 固定 栅 格 之 间 切 换 ， 例 如 : 
| <div class="row-fluid"> 

<div class="span3">…</div> 

<div class="span9">…</div> 

</div> 





3.4 响应 式 布局 的 概 阁 系统 


| Bootstrap 2 和 Bootstrap 3 在 响应 式 方面 差别 不 大 , 比较 大 的 区 别 在 于 Bootstrap 2 更 偏 
| 重 于 传统 的 PC 端 网 页 ， 默 认 不 支持 响应 式 ， 需 要 额外 引入 ; 而 Bootstrap 3 则 恰好 相反 ， 
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默认 就 是 响应 式 栅 格 系统 ， 不 再 提供 非 响应 式 的 固定 布局 。 因 此 从 灵活 性 角度 考虑 ， 反 而 | 
Æ Bootstrap 2 更 好 。 H 
1. Bootstrap 2 中 的 响应 式 布局 


先 来 看 看 Bootstrap 2 提供 的 响应 式 方案 。 在 Bootstrap 2 中 ,必须 额外 引入 响应 式 布局 i ey 
代码 ,在 下 载 解压 Bootstrap 后 , 会 有 一 个 名 为 Bootstrap-responsive.css 的 文件 。 需 要 在 HTML 
文档 中 引入 这 个 文件 ， 此 外 ， 还 需要 添加 响应 式 必需 的 <meta> 标 签 ， 代 码 示例 如 下 : | 
<meta name-"viewport" content-"width-device-width, intial-scale=1.0"> | 
<link href="assets/css/bootstrap-responsive.css rel="stylesheet"> i 
在 3.2 节 和 3.3 节 中 详细 介绍 了 媒介 查询 和 响应 式 设计 的 内 容 ， 手 写 响应 式 代码 由 于 | 
各 人 风格 、 水 平 的 差异 ， 同 样 的 效果 写 出 的 代码 可 能 大 相 径 庭 ， 而 Bootstrap 等 框架 对 响 | 
应 式 的 封装 不 仅仅 提升 了 开发 效率 ， 也 避免 了 多 人 协作 和 维护 项 目的 难以 协调 和 维护 | 
问题 。 | 
Bootstrap 2 根据 市 场 上 常用 的 设备 宽度 分 隔 了 5 个 区 间 : 
1200 像素 以 上 的 大 屏幕 设备 ， 如 台式 机 、13 寸 以 上 的 笔记 本 。 
980-1200 像素 之 间 的 设备 ， 如 上 网 本 、 老 式 的 罕 屏 显示 器 。 
760~980 像素 之 间 的 主流 平板 。 
480—768 像素 的 大 屏 手 机 或 6、7 寸 的 平板 。 
480 像素 以 下 的 小 屏 手机 。 | 
不 同 的 区 间 中 ， 栅 格 和 container 会 使 用 不 同 的 值 来 适应 比例 的 变化 ， 具 体 的 数值 请 参照 ， 
表 3.1。 | 


ARARA 


表 3.1 Bootstrap 2 的 响应 式 布局 区 间 
i xm 
| 大 F980px |  — ep | 
流 式 列 ， 无 固定 宽度 
流 式 列 ， 无 固定 宽度 
2. Bootstrap 3 中 的 响应 式 布局 


除了 引入 响应 式 以 外 ， 在 功能 方面 Bootstrap 3 与 Bootstrap 2 相 比 有 两 点 较 大 的 变化 : | 

回 ”拥抱 大 屏幕 ， 移 除了 小 屏 手 机 和 大 屏 手 机 (480—768 像素 ) 这 个 媒介 查询 的 区 间 ， | 

768 像素 以 下 的 屏幕 统一 归 为 小 屏幕 设备 。 | 

A ”设计 了 表现 不 同 的 栅 格 类 ， 对 栅 格 类 的 命名 规则 也 做 了 很 大 的 修改 ， 更 复杂 但 使 | 

用 也 更 灵活 ， 能 适应 更 多 的 场景 。 | 

在 Bootstrap 2 中 , 栅 格 全 部 采用 span* 作 为 前 级 , 而 在 Bootstrap 3 中 采用 了 col-type-* | 

这 样 命名 的 前 级 ， 其 中 type 可 以 取 xs( 超 小 屏 )、sm COMED, md CHED, lg CKE) 4 | 

个 值 。 | 
通过 表 3.2 可 以 详细 查看 Bootstrap 3 的 栅 格 系统 是 如 何在 多 种 屏幕 设备 上 工作 的 。 
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超 小 屏幕 设备 大 屏幕 设备 
手机 (<768px) 桌面 (>120px) 
栅 格 系统 行为 总 是 水 平 排列 平 排列 











最 大 的 container 宽度 | None (自动 ) 






























列 数 12 

最 大 列 宽 自动 [ Gopx [ 78px [ 95px 
槽 宽 30px (每 列 左右 均 有 15px) 

TRE Yes 

Offsets N/A Yes 

列 排序 NA Yes 


Bootstrap 中 的 响应 式 栅 格 用 例如 下 : 


<div class="container"> 
<div class="row"> 

<div class="col-xs-12 col-sm-3 col-md-5 col-lg-4"> 
<hl> 体 育 新 闻 </hl> 
<hl> 体 育 新 闻 </h1> 
<hl> 体 育 新 闻 </h1> 

</div> 

«div class="col-xs-12 col-sm-9 col-md-7 col-lg-8"> 


<p> 美 网 第 二 轮 纳 达尔 6-0/7-5/6-1 塞 皮 闻 入 男 单 32 强 ， 并 在 本 场 比赛 中 成 为 了 使 用 美 网 新 项 


(mha- 人 。 赛 后 他 畅谈 了 美 网 顶棚 初 体验 ， 并 为 组 委 会 如 何 治 理 现场 喧闹 献 言 献策 。</p> 


</div> 
</div> 
</div> 


代码 生成 效果 如 图 3.2 所 示 。 








图 3.2 ”响应 式 栅 格 在 不 同 屏幕 下 的 效果 


根据 表 3.2 的 介绍 来 看 这 个 示例 ,可 以 发 现在 窗口 尺寸 大 于 1200 像素 时 , 左 侧 边栏 占 


| dg 4 列 宽度 ， 右 侧 边栏 占据 8 列 宽度 ; 尺寸 在 992~1200px 之 间 时 ， 左 边栏 占据 5 列 宽度 ， 
| 右边 栏 占据 7 列 宽度 ; 而 当 尺寸 在 768-992px 之 间 时 ， 左 侧 边栏 占据 3 列 宽度 ， 右 侧 边栏 
| 占据 9 列 宽度 。 小 于 768px 时 ， 则 左右 侧 边栏 都 占据 1009 9E E, HEB. 


本 章 总 结 


本 章 讲解 了 Bootstrap 网 格 系统 的 原理 及 应 用 方法 ， 现 总 结 如 下 : 

A 行 必须 放置 在 .container class 内 ， 以 便 获得 适当 的 对 齐 〈alignment) 和 内 边 距 
(padding)。 

A ”使 用 行 来 创建 列 的 水 平 组 。 

ED 内容 应 该 放置 在 列 内 ， 且 唯 有 列 可 以 是 行 的 直接 子 元 素 。 
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预定 义 的 网 格 类， 如 row 和 .col-xs-4， 可 用 于 快速 创建 网 格 布局 。LESS 混合 类 可 | 


用 于 更 多 语义 布局 。 | 
回 “ 列 通过 内 边 距 (padding) 来 创建 列 内 容 之 间 的 间隙 。 该 内 边 距 是 通过 rows 上 的 | 
外 边 距 (margin) 取 负 ， 表 示 第 一 列 和 最 后 一 列 的 行 偏 移 。 an 


回 ”网 格 系统 是 通过 指定 你 想 要 横 跨 的 12 个 可 用 的 列 来 创建 的 。 例 如 ， 要 创建 3 个 ， 


相等 的 列 ， 则 使 用 3 个 .col-xs-4。 
RE 作业 


一 、 选 择 题 

l. 图 3.3 所 示 的 代码 错 在 哪里 ? C) 
A. 样式 col 应 该 用 最 大 值 不 应 超过 12 B. col-xs-* 应 该 比 col-sm-* 大 | 
C. 正确 | 


2. 图 3.4 所 示 的 Bootstrap 网 格 代码 嵌 套 正确 吗 ? ( ) 
A. di B. 对 


3. Bootstrap 支持 移动 优先 的 原则 ， 意 味 着 样式 被 设计 成 优先 处 理 移 动 设备 上 的 布局 。 | 


A. 对 B. fü 


col-xs-12 col-sn-15"> 





图 3.3 选择 题 1 代码 图 3.4 选择 题 2 代码 
二 、 操 作 题 
1. 实现 如 图 3.5 所 示 的 效果 。 
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum 
Lorem ipsum dolor sit amet Lorem ipsum dolor sitamet Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, 
consectetur adipiscing elit. Aenean consectetur adipiscing alit. Aenean consectetur adipiscing elit. Aenean consectetur adipiscing elit. Aenean 


pharetra varius maximus pharetra varius maximus. pharetra varius maximus pharetra varius maximus 


3.5 四 列 网 格 布局 
2. 实现 如 图 3.6 所 示 的 效果 。 








我 是 第 一 列 我 是 第 二 列 - 我 有 二 个 合子 

Lorem ipsum dolor sit amet, Consectetur art pariy Tonx culpa semiotics. Pinterest | sed do eusmod tempor incidicunt ut labore et 

consectetur adipisicing elt. assumenda minim organic quis dolore magna aliqua. Ut enim ad minim veniam, quis 
nostrud exercitation ullamco laboris nisi ut aliquip ex 








ea commodo consequat. 
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Bootstrap 的 基本 样式 


[suma] 


本 章 主要 学 习 使 用 Bootstrap 基本 样式 以 及 如 何 定制 样式 。 


本 章 工作 任务 


实现 Bootstrap 的 基本 CSS 样式 。 


本 章 技能 目标 | 


了 解 Bootstrap 字体 版 式 。 

掌握 Bootstrap 表格 的 用 法 。 
掌握 Bootstrap 表单 的 用 法 。 
掌握 Bootstrap 按钮 的 用 法 。 
> ”掌握 Bootstrap 图 片 的 用 法 。 





VV wNN 


预习 作业 


1.。 背诵 英文 单词 

请 在 预习 时 找 出 下 列 单词 在 教材 中 的 用 法 , 了解 它 们 的 含义 和 发 音 , 并 填写 于 横 线 处 。 
Alignment 
Address, 
Blockquote, 
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2. 预习 并 回答 以 下 问题 
请 阅读 本 章 内容 ， 在 作业 本 上 完成 以 下 简 答 题 : 
(1) Bootstrap 的 基本 样式 有 几 大 类 ? | 
(2) Bootstrap 字体 版 式 有 哪 几 种 ? | & 


(3) 如 何 用 Bootstrap 生成 简洁 高 效 的 表格 。 | 
(4) Bootstrap 对 表单 的 自动 样式 化 有 哪 几 种 ? 
41 字体 版 式 


文字 不 仅 是 传递 信息 的 主要 载体 ， 也 是 页 面 版 式 的 重要 组 成 部 分 。 网 页 开发 项 目 中 多 
使 用 图 像 、 动 画 或 视频 等 多 媒体 信息 ， 可 以 让 网 页 有 更 好 的 用 户 体验 ， 但 是 文字 传递 的 信 | 
息 是 最 准确 的 ， 也 是 最 丰富 的 。 | 

字体 和 文字 版 式 与 传统 印刷 排版 的 版 式 相似 ， 如 字体 类 型 、 大 小 和 颜色 ， 段 落 文本 的 | 
版 式 和 样式 ， 这 些 效果 在 网 页 中 都 可 以 通过 CSS 来 实现 。Bootstrap 通过 重 写 标签 默认 样 | 
式 ， 实 现 对 页 面 字体 版 式 的 优化 ， 以 适应 当前 网 页 信息 呈现 的 流行 趋势 。 | 


4.1.1 标题 


Bootstrap 重新 定义 了 <h1>-<h6> 标 签 的 样式 ，Bootstrap 2 采用 了 加 粗 字 体 和 国定 行 高 | 
(line-height)， 而 Bootstrap 3 则 采用 了 半 加 粗 的 字体 ， 所 有 标题 的 行 高 都 采用 了 1.1 倍 字 ， 
体 尺 寸 。 两 者 对 比 示例 如 图 4.1 所 示 。 | 





h1. Heading 1 h1. Heading 1 
h2. Heading 2 h2. Heading 2 
h3. Heading 3 h3. Heading 3 
h4. Heading 4 h4. Heading 4 
n5. Heading 5 h5 Heading 5 
E 及 Hesana6 

Bootstrap 20908 Bootstrap 289838. 











图 4.1 <hl>~<h6> 标 签 对 比 


在 实际 开发 当中 , 大 多 数 网 站 对 于 标题 都 会 采用 自己 设计 的 样式 ，Bootstrap 默认 的 标 | 
题 样式 一 般 只 会 在 做 后 台 管 理 或 者 内 部 工具 时 才 会 使 用 ， 主 要 是 解决 各 个 浏览 器 下 默认 样 | 
式 不 一 致 的 问题 ,而 且 相 比 浏览 器 默认 的 样式 还 是 要 美观 不 少 。 以 Bootstrap 3 为 例 , 也 可 ， 
以 看 一 下 应 用 .h* 的 <div> 的 展示 效果 ， 如 图 42 所 示 。 | 
<div class="h1">h1. 学 好 Bootstrap: 要 从 标题 开始 </div> 
<div class="h2">h2. 学 好 Bootstrap: 要 从 标题 开始 </div> 
<div class="h3">h3. 学 好 Bootstrap: 要 从 标题 开始 </div> 
<div class="h4">h4. 学 好 Bootstrap: 要 从 标题 开始 </div> 
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<div class-"h5"-h5. 学 好 Bootstrap: 要 从 标题 开始 </div> 
<div class="h6">h6. 学 好 Bootstrap: 要 从 标题 开始 </div> 


h1. 学 好 Bootstrap: 要 从 标题 开始 





h4. 学 好 Bootstrap: 要 从 标题 开始 
n5. 学 好 Bootstrap: 要 从 标题 开始 
h6. 学 好 Bootstrap 要 从 标题 开始 


24 | h2. 学 好 Bootstrap: 要 从 标题 开始 
h3. 学 好 Bootstrap: 要 从 标题 开始 





图 4.2 div=h* 的 输出 效果 
| 可 以 在 标题 中 插入 <small> 标 签 或 者 .small 元 素来 设置 副标题 ， 例 如 下 面 代码 ， 效 果 如 
| 图 4.3 所 示 : 
<h1>h1.Bootstrap 主 标题 <smal> 次 级 标题 </small></h1> 


h1.Bootstrap 主 标题 ios 





| 图 4.3 ”<small> 标 签 效果 
| 可 以 看 到 ， 定 义 在 <small> 标 签 中 的 文本 比 实际 的 标题 样式 要 更 淡 、 更 小 一 些 。 


| 412 全 局 设置 


Bootstrap 2 中 定义 的 全 局 字体 是 14px， 行 高 (line-height) 是 默认 尺寸 20px。 
Bootstrap 3 中 定义 的 全 局 字体 也 是 14px, 行 高 (line-height) 是 默认 字体 尺寸 的 1.428 倍 。 
| 对 于 段落 (<p>)， 可 以 通过 添加 class="lead" 进 行 突出 显示 。Bootstrap 默认 的 全 局 字 
， 体 和 段落 效果 如 图 4.4 所 示 。 
p> 全 局 字体 也 是 14px， 行 高 (line-height) 是 默认 字体 尺寸 的 1.428 fik «ipo 


<p class="lead"> 
加 了 .lead 样式 效果 : 全 局 字体 也 是 14px， 行 高 〈line-height) 是 默认 字体 尺寸 的 1.428 倍 </p> 


全 局 字体 也 是 14px， 行 高 (ine-height) 是 默认 字体 尺寸 的 1.428 信 


加 了 .lead 样 式 效果 : 全 局 字体 也 是 14px， 行 高 (line-height) 是 默认 字体 尺寸 的 1.428 倍 





44 Bootstrap 默认 的 全 局 字体 、 段 落 效果 和 字 间 距 
如 果 认 为 默认 设置 不 合适 ， 可 以 修改 Bootstrap 代码 或 者 自己 编写 代码 进行 覆盖 。 


42 表 格 


Bootstrap 提供 了 一 种 可 以 生成 简洁 表格 的 高 效 布局 ， 案 例如 下 。 
| 如 果 要 使 用 Bootstrap 提供 的 基本 表格 样式 , 需要 在 代码 中 为 HTML 的 table 标签 添加 
| table 这 个 CSS 类 ， 效 果 如 图 4.5 所 示 。 
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<table class="table "> 
<thead> 
<tr> 
<th>First Name</th> 
<th>Last Name</th> 
<th>Role</th> 
«hr 
</thead> 
<tbody> 
«tr 
<td>Aravind</td> 
<td>Shenoy</td> 
<td>Technical Content Writer</td> 
«Ir» 
<tr> 
<td>Jim</td> 
<td>Morrison</td> 
<td>Awesome Vocalist</td> 
</> 
«tr 
<td>Jimi</td> 
<td>Hendrix</td> 
<td> Amazing Guitarist</td> 
</i> 
</tbody> 
</table> 








First Name Last Name Role 


Aravind ‘Shenoy Technical Content Writer 


Jim Morrison Awesome Vocalist 


Jimi Hendrix Amazing Guitarist 





4.5 应 用 class="table" 的 表格 


也 可 以 为 表格 甚至 单元 格 添加 情景 颜色 ， 使 用 success. warning. danger. info. active | 
这 样 的 类 。 例 如 ， 在 下 面 的 代码 中 ， 为 表格 定义 了 情景 类 ， 效 果 如 图 4.6 所 示 : 


<h2> 表 格 情景 类 样式 </h2> 
<table class="table table-bordered"> 
«mr | 
<th> 样 式 类 </th> 
<th> 说 明 </th> 
«hr 
<tr class="success"> ! 
<td>success</td> | 
<td> 表 示 成 功 或 积极 的 行为 。</td> | 
«ft | 
<tr class="error"> | 
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<td>error</td 
><td> 表 示 一 个 危险 或 存 有 潜在 危险 的 行为 。</td> 
<h> 
s] <tr class-"warning" 
4 | <td> 表 示警 告 ， 可 能 需要 注意 。</td> 


È «hr 
Note 1 <tr class="info"> 


<td>info</td> 
<td> 作 为 一 个 默认 样式 的 一 个 普 代 样式 。</td> 
| «hr» 
| </table> 
| s Moe I oe pt 
| 表格 情景 类 样式 
| fates m 
| success JOTHODSRIRIBAYE A 
| error 表示 一 个 危险 或 存 有 潜在 危险 的 行为 
| warning ATES, THREE. 
| info te 1A REAN 








图 4.6 表格 情景 类 样式 
43 d 4a 


| Bootstrap 提供 了 一 组 标准 按钮 配色 和 大 小 调整 方案 , 只 需要 简单 地 应 用 相应 的 按钮 类 
| 即 可 。Bootstrap 3 提供 的 按钮 标准 样式 如 图 4.7 所 示 。 


Default 





图 4.7 Bootstrap 3 中 按钮 的 样式 


<! 一 标准 按钮 样式 --> 

«button type="button" class="btn bin-default">#kiA</button> 
<! 一 表示 主要 的 按钮 -> 

<button type="button" class="btnbtn-primary"> 主 要 </button> 
<! 一 表示 成 功 的 按钮 -> 

<button type="button" class="btnbtn-success"> 成 功 </button> 
<! 一 表示 消息 的 按钮 -> 

<button type="button" class="btnbtn-info"> 信 息 </button> 
<! 一 表示 警告 的 按钮 -> 

«button type="button" class="bmbtn-warning"> 警 告 </button> 
<! 一 表示 危险 的 按钮 -> 

<button type="button" class="btn btn-danger"> 危 险 </button> 
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代码 生成 效果 如 图 4.8 所 示 。 








eee eet 
图 4.8 对 应 的 代码 如 下 : | 
<button type="button" class="btn btn-primary btn-lg"> 大 号 按钮 </button> | 
<button type="button" class="btn btn-primary"> 默 认 尺 寸 </button> 
«button type="button" class="btn btn-primary btn-sm"> 小 号 按钮 </button> 
<button type="button" class="btn btn-primary btn-xs"> 更 小 的 按钮 </button> 
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表单 有 很 多 类 型 ， 如 文本 框 、 下 拉 菜 单 、 单 选 按钮 、 复 选 框 、 提 交 按 钮 等 ，Bootstrap | 
提供 了 一 整套 风格 统一 、 简 洁 美观 的 表单 样式 ， 只 要 引入 Bootstrap， 无 须 做 任何 配置 , 表 | 


单 的 样式 就 会 生效 ， 如 图 4.9 所 示 。 


图 4.9 默认 文本 框 
源 代 码 如 下 : 
<input type="text"> 
看 一 下 在 实际 项 目 中 的 应 用 : 


<h3> 用 户 登 录 </h3> 
<form method="post" action=""> 
<label for="userName"> 用 户 名 : </label> 
<input type="text" id="userName" /> 
<label for="userPsw"># 5: </label> 
<input type="password" id="userPsw" /> 
<label for="validate"> 验 证 码 : </label> 
<input type="text" id="validate" /> 
<img src-"images/getcode.jpg" alt=" 验 证 码 : 3731" > 
<label for="keepLogin"> 
<input type="checkbox" id="keepLogin" /> 
记 住 我 的 登录 信息 </label> 
<button type="submit” class="btn_login"> 登 录 </button> 
<a href="#" class="reg"> 用 户 注册 </a> 
</form> 


这 段 代码 执行 之 后 的 效果 如 图 4.10 所 示 。 
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用 户 登 录 





记 住 我 的 登录 信息 
登陆 | 用户 注 册 





410 正常 表单 效果 


| <h3> 用 户 登 录 </h3> 
<form method="post" action="" class=" form-horizontal"> 
<div class="control-group"> 
| <div class="control-label"> 
| <label for="userName"> 用 户 名 : </label> 
</div> 
| <div class="controls"> 
<input type="text" id="userName" /> 
</div> 
</div> 
<div class="control-group"> 
| <div class="control-label"> 
| <label for="userPsw"># 5: </label> 
</div> 
| <div class="controls"> 
| <input type="password" id="userPsw" /> 
</div> 
| </div> 
| <div class="control-group"> 
| <div class="control-label"> 
«label for="validate"> 验 证 码 : </label> 
| </div> 
<div class="controls"> 
<input type="text" id="validate" /> 
«imgsrc-"images/getcode.jpg" alt=" 验 证 码 : 3731" /> 
</div> 
</div> 
<div class="control-group"> 
<div class="control-label"> 
<label for="keepLogin"> 记 住 我 的 登录 信息 </label> 
</div> 
| «div class="controls"> 
| <input type="checkbox" id="keepLogin" /> 
| </div> 
| </div> 
| «div class="control-group"> 
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<div class="controls"> | 
«button type="submit" class-"btn login"> 登 录 </button> | 
<a href="#" class="reg"> 用 户 注册 </a> | 


| 
</div> | 
</form> | SA 
代码 执行 之 后 的 效果 如 图 4.11 所 示 。 





Hia: 


记 住 我 的 登录 信息 


Eme 





图 4.11 水 平 表单 效果 图 


内 联 表单 代码 如 下 ， 效 果 如 图 4.12 所 示 。 


<h3> 用 户 登录 </h3> 
<form method="post" action="" class="form-inline"> 
<label for="userName"> 用 户 名 : </label> 
<input type="text" id="userName" /> 
<label for="userPsw">% #3: </label> 
<input type="password" id="userPsw" /> 
<label for="validate"> 验 证 码 : </label> 
<input type="text" id="validate" /> 
«imgsrc-"images/getcode.jpg" alt=" 验 证 码 : 3731" /> 
<label for="keepLogin"> 
<input type="checkbox" id="keepLogin" /> 
记 住 我 的 登录 信息 </label> 
<button type="submit" class="btn_login"> 登 录 </button> 
<a href="#" class="reg"> 用 户 注册 </a> 





</form> 
R t 
用 户 登 录 
用 户 各 : zA WA: 3731 D 记 住 我 的 登录 信息 | 登录 | 用户 注册 





图 4.12 内 联 表单 效果 图 | 
45 图 K | 


Bootstrap 的 图 片 类 包含 了 对 最 常用 的 圆 角 、 圆 形 、 简 洁 边 框 这 3 种 图 片 形状 的 修正 ， 如 | 
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， 图 4.13 所 示 ， 常 用 于 头像 的 处 理 。 








GULES tke 


图 4.13 Bootstrap 的 图 片 类 型 


4.13 对 应 的 代码 如 下 : 


<div class="row-fluid"> 
<div class="text-center span3"> 
<img src="images/bg] jpg"> 
<h3> 正 常 效 果 </h3> 
</div> 
<div class="text-center span3"> 
<img src-"images/bgl.jpg" class="img-rounded" title=" 圆 角 图 片 "> 
| <h3> 圆 角 效果 </h3> 
| </div> 
<div class="text-center span3"> 
<img src-"images/bgl.jpg" class-"img-circle" title=" 圆 形 图 片 "> 
<h3> 圆 形 效果 </h3> 
</div> 
<div class="text-center span3"> 
<img src="images/bg] jpg" class="img-polaroid" title=" 镶 边 图 片 "> 
<h3> 镶 边 效 果 </h3> 
</div> 
</div> 


本 章 总 结 


使 用 Bootstrap 的 排版 特性 ， 可 以 创建 标题 、 段 落 、 列 表 及 其 他 内 联 元 素 。 
Bootstrap 提供 了 一 个 清晰 的 创建 表格 的 布局 。 

Bootstrap 提供 了 一 系列 选项 来 定义 按钮 的 样式 ， 分 别 定 义 按钮 的 样式 和 大 小 。 
Bootstrap 提供 了 下 列 类 型 的 表单 布局 : 

ED ”垂直 表单 默认) 。 

M ”内 联 表单 。 

M KRM. 

Bootstrap 提供 了 3 个 可 对 图 片 应 用 简单 样式 的 class。 

.img-rounded: 添加 border-radius:6px 来 获得 图 片 圆 角 。 
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.img-circle: 添加 border-radius:50% 来 让 整个 图 片 变 成 圆 形 。 


-img-thumbnail: 添加 一 些 内 边 距 (padding) 和 一 个 灰色 的 边框 。 


本 章 作 二 


一 、 选 择 题 
l. 信息 结构 需要 考虑 的 信息 特征 是 ( )。 
A. 结构 B. 标签 C. 导航 D. 内 容 


2. 面包 导 路 径 显示 C D. 
A. 设置 程序 步骤 
C. 内 容 属性 
3. 下 面 的 代码 是 网 页 中 导航 栏 ， 哪 个 网 页 是 当前 浏览 的 页 面 ? C 
<ul class="navnavbar-nav"> 
<li><a href-"index html" # 9i -/a»—/li- 
<li><a hre 全 "abouthtml"> 关 于 我 们 </a></i> 
<li class="active"><a hre 全 "products html"> 产 品 展示 </a></i> 
<li><a hre 伍 "contact.html"> 联 系 我 们 </a></li> 
«ful 
A. 产品 展示 B. 首页 
二 、 操 作 题 


1. 实现 如 图 4.14 所 示 的 效果 。 


Search Our Websit & Products A 


C. 关于 我 们 











Responsive Clean 


414 网 页 基本 模块 
2. 实现 如 图 4.15 所 示 的 效果 。 





Duis posuere turpis augue. 
Curabitur mattis feugiat 
aliquam. Cras luctus magna 
tellus. Nullam consequat vitae 


sem nec luctus 





415 图 文 列表 项 
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B. 页 面 之 间 的 层级 结构 


D. 联系 我 们 




















IL. 
使 用 Bootstrap 的 组 件 


组 件 在 Bootstrap 中 是 不 可 或 缺 的 利器 ， 它 们 是 一 些 独立 的 标记 片段 ， 有 时 也 会 集成 
— JavaScript 的 功能 ， 随 时 可 供 开发 工程 师 在 网 页 中 选择 、 复 制 和 使 用 。 具 备 诸如 模块 
性 (modularity) 代码 可 重用 性 ( code reusability ) 和 职责 分 离 ( separation of responsibilities )。 


| 本章 工作 任务 | 


如 何 调用 Bootstrap 常用 的 功能 模块 。 


| 本章 技 能 目标 上 


> TAF Bootstrap 常用 组 件 及 应 用 场景 。 
> 掌握 使 用 Bootstrap 常用 组 件 的 方法 。 


EELT | 


l. 背诵 英文 单词 

请 在 预习 时 找 出 下 列 单词 在 教材 中 的 用 法 ， 了解 它 们 的 含义 和 发 音 , 并 填写 于 横 线 处 。 
Modularity. 
Code reusability. 











Separation of responsibilities. 





Glyphicon 





Dropdown 





Breadcrumb 
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2. 预习 并 回答 以 下 问题 

请 阅读 本 章 内 容 ， 在 作业 本 上 完成 以 下 简 答 题 : 
(1) Bootstrap 组 件 是 什么 ? | 
(2) 为 什么 要 用 Bootstrap 组 件 ? | EF] 
(3) 如 何 引用 Bootstrap 组 件 及 样式 。 
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在 一 个 网 页 有 太 多 链接 时 ， 页 面 会 复杂 而 拥挤 。 在 这 种 情况 下 ， AGRA 


了 ， 可 以 把 不 太 重 要 的 链接 折叠 起 来 包含 在 页 面 中 ， 如 图 5.1 所 示 。 


选项 一 
选项 二 
选项 三 
选项 四 
图 5.1 下 拉 菜 单 
代码 如 下 : 
<div class="dropdown"> 
<buttonclass="btnbtn-primary dropdown-toggle" type="button" data-toggle="dropdown"> 
下 拉 菜 单 
<span class="caret"></span><!-- 下 拉 按 钮 的 向 下 箭头 --> 
</button> 


<ul class="dropdown-menu"> 
<li><a href="#"> I] —</a></li> 
<li><a href}"#">i I] —</a></li> 
<li><a href="#"> 4E </a></li> 
<li class="divider"></li> 
<li><a href="#"> I </a></li> 
</ul> 
</div> 
分 析 这 段 代 码 的 结构 : 
按钮 和 下 拉 选 项 都 要 包裹 在 <div class="dropdown">…</div> 中 。 
按钮 必须 添加 data-toggle="dropdown" 触 发 器 。 
放置 下 拉 选 项 的 无 序列 表 需 要 添加 .dropdown-menu 类 。 
添加 一 个 空 的 <li class="divider"></li> 标 签 来 分 隔 列 表 项 。 


注意 : 官方 网 站 给 出 的 示例 代码 会 添加 很 多 的 Tole="……" 的 属性 ， 这 些 属性 不 是 必需 的 ， 


但 在 实际 应 用 中 最 好 加 上 以 提升 可 访问 性 。 
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& | 
— 按钮 组 用 于 把 一 组 按钮 放 在 同一 行 里 .基本 的 用 法 很 简单 ,只 需要 将 一 组 按钮 放 在 <div 
class= "btn-group">…</div> 中 即 可 ， 例 如 : 


<div class="btn-group"> 
<button type="button" class="btn btn-default"> 左 转弯 </button> 
<button type="button" class="btn btn-default"> 直 行 </button> 
<button type="button" class="btn btn-default"> 右 转弯 </button> 
</div> 
| 效果 如 图 5.2 所 示 。 
| GER: 当 为 按钮 组 中 的 元 素 应 用 工具 提示 或 弹出 框 时 ， 必 须 指定 container: "body" 选 项 ， 这 
样 可 以 避免 不 必要 的 副作用 ( 例如 工具 提示 或 弹出 框 触发 时 , 会 让 页 面 元 素 变 宽 或 失 
XU). 


PAA EAH, PMT ARE. 
(1) 垂直 排列 : <div class="btn-group-vertical">…</div>， 如 图 5.3 所 示 。 


| ze 
直行 
左 转弯 Bi 右 转弯 tx 
图 5.2 按钮 组 图 5.3 垂直 排列 按钮 组 
(2) 两 端 对 齐 : 代码 如 下 ， 效 果 如 图 5.4 所 示 。 
<div class="btn-group-justified"> 
<a class="btnbtn-default"> 左 转弯 </a> 
<a type="button" class="btnbtn-default"> 直 行 </a> 
<a type="button" class="btnbtn-default"> 右 转弯 </a> 
</div> 
左 转弯 直行 右 转弯 
| 54 FTA 
| 注意 : 两 端 对 齐 的 用 法 只 适用 <a> 元 素 , 因为 <button> 元 素 不 能 应 用 这 些 样式 并 将 其 所 包含 
| 的 内 容 两 端 对 齐 。 


(3) RE: 可 以 在 按钮 组 中 继续 内 嵌 按 钮 组 ， 例 如 如 下 代码 ， 效 果 如 图 5.5 所 示 。 


<div class="btn-group"> 
<button type="button" class="btnbtn-default"> 按 钮 1</button> 
<button type="button" class="btnbtn-default"> 按 钮 2</button> 
</div> 
<div class="btn-group"> 
«button type="button" class="btnbtn-default dropdown-toggle" data-toggle="dropdown"> 嵌 套 下 拉 
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<span class="caret"></span> 
</button> 
<ul class="dropdown-menu"> 
<li><a hre 伍 "#"> 下 拉 选 项 </a></li> 
<li><a href="#"> F BGI </a></li> 
</ul> 
</div> 
Sus ” 按 扫 2 | XET- 
Tim 
Tier 


图 5.5 RAHA 


5.3 input 控件 组 


input 输入 框 经 常会 和 其 他 元 素 配合 使 用 , 最 常见 的 input 控件 组 肯定 非 搜索 框 莫 属 了 ， | 


Bootstrap 的 input 控件 组 包含 了 多 数 常见 的 分 组 类 型 。 


Bootstrap 中 的 控件 组 的 共同 点 是 都 需要 包 庄 在 <div class="input-group">+++</div> [3 | 


部 ， 下 面 将 逐个 解析 控件 组 的 各 种 不 同 组 合 。 
COD 首先 是 最 常见 的 搜索 框 ， 就 是 按钮 +input 表单 的 组 合 ， 如 图 5.6 所 示 。 


<div class="input-group"> 
<input type="text" class="form-control"> 
<span class="input-group-btn"> 
<button class-"btnbtn-default" type="button"> 搜 索 </button> 
</span> 
</div> 


其 实质 就 是 input 表单 按钮 ， 需 要 注意 的 是 要 在 按钮 外 包 庄 一 层 <span class="form- | 
control">…</span> 代 码 。 如果 需要 带 下 拉 菜 单 的 按钮 , 则 只 需要 将 按钮 换 成 下 拉 菜 单 即 可 。 ， 
(2) 如 果 和 input 配合 的 不 是 可 单 击 的 按钮 ， 只 是 用 于 说 明 的 文字 或 图 片 ， 则 可 以 采 | 


取 如 下 应 用 ， 效 果 如 图 5.7 所 示 。 


<div class="input-group"> 

<input type="text" class="form-control"> 

<span class="input-group-addon"> 

输入 完成 后 回 车 

</span> 
</div> 

搜索 输入 完成 后 回 车 
图 5.6 搜索 框 57 ”搜索 框 后 不 是 按钮 
54 导 航 


Bootstrap 的 导航 主要 分 为 胶 圳 式 导 航 、 面 包 导 导航、 头 部 导航 3 大 类 ， 可 以 满足 大 多 | 
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Zw) 
eS 
数 开发 的 需求 。 

1. RAH 


胶 圳 式 导航 一 般 用 于 平 级 的 选项 列表 ， 如 图 5.8 所 示 。 
胶 圳 导航 实质 是 一 个 无 序列 表 ， 只 需要 给 ul 元 素 添 加 .nav 和 .nav-pill 类 即 可 ， 例 如 : 
<ul class="navnav-pills"> 
<li class="active"><a href="#"> 1$ Wi -/a»-/li 
<li><a href="#"> [fj St}</a></li> 
<li><a href="#"> Etfi </a></li> 
</ul> 
如 果 需 要 纵向 的 胶 计 导航， 只 需要 为 ul 元 素 追 加 .nav-stacked 类 即 可 。 
<ul class="navnav-pills nav-stacked"> 
<li class="active"><a href="#"> 1 Vl </a></li> 
<li><a href="#">fiij fp </a></li> 
<li><a href="#"> TE </a></li> 
«ful 


纵向 的 胶囊 导航 如 图 5.9 所 示 。 








图 5.8 横向 的 胶囊 式 导航 5.9 纵向 的 胶 圳 导航 


2. GAR Hi 
| 面包 悄 导 航 同样 采用 了 列表 结构 ， 这 里 需要 为 ul 或 ol 元 素 添加 .breadcrumb 类 来 实现 
| 导航 设置 ， 例 如 下 列 代 码 ， 效 果 如 图 5.10 所 示 : 
| <ol class="breadcrumb"> 
<li><a href="#"> H T </a></li> 
<li><a href="#"> VCRL E</a></li> 
<li class="active"> 数 据 </li> 
</ol> 





图 5.10 Mae Shi 


5.5 头 部 导航 


| 绝 大 多 数 网 站 首页 的 页 头 部 分 都 会 放置 一 个 针对 主要 内 容 的 导航 ， 让 用 户 可 以 迅速 了 
| 解 网 站 的 内 容 和 结构 。Bootstrap 的 头 部 导航 如 图 5.11 所 示 。 
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QS 
tLOGO i itt = 
图 5.11 头 部 导航 
头 部 导航 的 基本 结构 如 下 : | 
<nav class="navbarnavbar-default"> | 
<div class="navbar-header"><!-- 这 里 设置 网 站 的 标题 --> 
<a class="navbar-brand" hre 人 ="#"> 网 站 LOGO</a> | 


</div> 
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
<!-- 这 里 设置 网 站 的 标题 -> 
<ul class="navnavbar-nav"> 
<li class="active"><a href="#"> 链 接 </a></li> 
<li><a href="#">4#4%</a></li> 
</ul> 
<ul class="navnavbar-navnavbar-right"> 
<li><a href="#"> 链 接 </a></li> 
«ful 
</div> 
</nav> 
具体 分 析 头 部 导航 ， 主 要 分 为 两 层 结构 。 | 
第 一 层 是 最 外 面 的 <nav class-"navbarnavbar- default">…</nav>， 这 一 层 用 于 设置 导航 | 
的 基本 样式 ， 如 果 将 .navbar-default 类 替换 为 .navbar- inverse 类 ， 则 显示 为 反 色 的 导航 〈 黑 | 
底 白字 )， 如 图 5.12 所 示 。 | 





E512 反 色 的 头 部 导航 | 
第 二 层 有 两 个 并 列 的 元 素 : <div class="navbar-header">…</div> 内 部 用 于 设置 标题 内 
容 ; <div class="collapse navbar-collapse">…</div> 内 部 则 用 于 编写 导航 链接 、 搜 索 表单 、 ， 
下 拉 菜 单 等 具体 的 导航 内 容 。 
Bootstrap 3 提供 了 小 窗口 下 导航 收 起 /展开 的 功能 ， 如 图 5.13 所 示 。 





图 5.13 头 部 导航 小 窗口 的 收 起 /展开 
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需要 在 <div class="navbar-header"> 中 设置 展开 / 收 起 按钮 ， 例 如 : 


«nav class="navbarnavbar-inverse"> 

<div class="navbar-header"> 
| <button type="button" class-"navbar-toggle" data-toggle-"collapse" data-target="*#bs-example-navbar- 
| collapse-1"> 


1 <span class-"sr-only"^ Toggle navigation</span> 
«span class="icon-bar"></span> 

i <span class="icon-bar"></span> 

<span class="icon-bar"></span> 
</button> 
<a class-"navbar-brand" hre 人 ="#"> 网 站 Logo</a> 
| </div> 
| <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
| <ul class="navnavbar-nav"> 
1 <li class="active"><a href="#">#£%</a></li> 
| <li><a hre 伍 "#"> 链 接 </a></li> 
| <li class="dropdown"> 
<a href="#" class-"dropdown-toggle" data-toggle="dropdown"> F #2 3¢ 4 <b class="caret"> 











<ul class="dropdown-menu"> 
<li><a href="#">Action</a></li> 
| <li><a href="#">Another action</a></li> 
| <li><a href="#">Something else here</a></li> 
<li class="divider"></li> 
| <li><a href="#">Separated link</a></li> 
| <li class="divider"></li> 
| <li><a href="#">One more separated link</a></li> 
</ul> 
| </li> 
| </ul> 
<form class="navbar-form navbar-left" role="search"> 
<div class="form-group"> 
| <input type="text" class="form-control"> 
| </div> 
| <button type="submit" class="btnbtn-default"> 搜 索 </button> 
| </form> 
| <ul class="navnavbar-navnavbar-right"> 
| <li><a href="#">8£HE</a></li> 
<li class="dropdown"> 
<a href="#" class-"dropdown-toggle" data-togegle="dropdown"> 下 拉 菜 单 <b class="caret"></b></a> 
<ul class="dropdown-menu"> 
<li><a href+"#">Action</a></li> 
<li><a href="#">Another action</a></li> 
<li><a href="#">Something else here</a></li> 
<li class="divider"></li> 
<li><a href="#">Separated link</a></li> 
<ul> 
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添加 .navbar-fixed-top 可 以 让 导航 固定 在 顶部 ， 不 会 随 页 面 滚动 而 消失 。 为 了 防止 导航 ， | 
条 固定 在 顶部 后 遮挡 正常 内 容 ， 需 要 设置 : body {padding-top:70px}， 其 中 具体 的 值 取决 于 
导航 条 的 高 度 。 


注意 ; 这 个 响应 式 的 导航 依赖 Bootstrap 的 collapse (HA) 插件 .请 务必 为 每 个 导航 条 加 EA 
上 role="navigation" 增 加 可 访问 性 (和 浏览 器 的 兼容 性 )。 


56 列 表 组 


列表 组 不 仅仅 是 对 列表 项 进行 美化 , 还 可 以 支持 任意 内 容 的 列表 化 展示 , 图 5.14 A 
经 修饰 的 无 序列 表 和 应 用 了 列表 组 的 列表 的 对 比 。 
对 于 列表 来 说 ， 列 表 组 的 结构 代码 如 下 : | 
<ul class="list-group"> | 
<li><a hre 伍 "#"> 选 项 一 </a></li> | 
<li><a href="#"> —</a></li> 
<li><a href="#"> — </a></li> 
<li><a href="#"> 9 </a><li> 
«ful 


需要 为 ul 和 ol 添加 .list-group 类 ， 同 时 需要 为 列表 项 添加 .list-group-item 类 。 
注意 : 在 列表 组 中 使 用 序列 表 时 不 会 显示 序号 。 


列表 组 不 仅 可 以 应 用 于 列表 , 还 可 以 将 其 他 需要 列表 的 元 素 展现 为 列表 的 样子 , 如 图 5.15 | 
所 示 o | 








。 选项 一 
。 选 项 二 选项 一 
选项 三 = 
选项 四 ”选项 一 RE, 4358 BRT He, EFO, Ss 
» BR R205} SWUM AS REALE, 
选项 三 
sta 34102. 96 步行 者 
pom SES HRSAMENREAT BEDE, ATANES, 
& EME. TEMES, ESR 
图 5.14 未 经 修饰 的 无 序列 表 和 列表 组 图 5.15 ” 非 列 表 但 是 展现 为 列表 的 样子 
图 5.15 的 代码 如 下 : 
<div class="list-group"> 


<a href="#" class="list-group-item active"> 

<h4 class="list-group-item-heading"> 快 船 战胜 雷霆 <h4> 
<p class="list-group-item-text">......</p> 

</a> 


</a> 
</div> 
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为 列表 组 添加 徽章 也 十 分 容易 ，Bootstrap 会 自动 将 徽章 放置 在 右边 ， 如 图 5.16 所 示 。 


PED ate eo 


f | 美国 队 金 牌 e 
SAR - 


| Banne @ 
s16 apie ie 


为 列表 组 添加 徽章 的 代码 如 下 : 


<ul class="list-group"> 
<li class="list-group-item"> 
<span class="badge">52</span> 
中 国 队 金 牌 
</li> 
<li class="list-group-item"> 
<span class="badge">48</span> 
美国 队 金 牌 
</i> 
<li class="list-group-item"> 
<span class="badge">41</span> 
俄罗斯 队 金牌 
| </i> 
| </ul> 


57 分 页 


几乎 所 有 的 列表 页 面 都 需要 分 页 ，Bootstrap 提供 了 一 个 较为 美观 的 分 页 样式 ， 如 图 5.17 


| BUR. 
m. 


图 5.17 分 页 


图 5.17 的 代码 结构 比较 简单 ， 只 需要 给 无 序列 表 的 ul 元 素 添 加 pagination AEP AY, 例如: 


<ul class="pagination"> 
<li class="disabled"><a href="#">&laquo:</a></li><!--disabled 类 表示 不 可 点 击 项 --> 
<li class="active"><a href="#">1</a></li> 
<li><a href}"#">2</a></li> 
<li><a href="#">3</a></li> 
<li><a href="#">4</a></li> 
<li><a href="#">5</a></li> 
<li><a href"#">&raquo:</a></li> 
</ul> 


| 可 以 通过 添加 pagination-lg 或 pagination-sm 类 来 获得 比 标准 尺寸 更 大 或 更 小 的 分 页 ， 如 
| 图 5.18 所 示 ， 代 码 如 下 : 
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<ul class="paginationpagination-lg">…</ul> 
<ul class="pagination ">…</ul> 
<ul class="paginationpagination-sm">---</ul> 


如 果 仅 仅 想 使 用 上 一 页 /下 一 页 的 功能 怎么 办 ? Bootstrap 也 内 置 了 该 


RHI ul 添加 -pager 类 即 可 ， 例 如 : 


<ul class="pager"> 
<li><a href="#">_—Wi</a></li> 
<li><a href="#"> F —W</a></li> 
<ul> 


效果 如 图 5.19 所 示 。 


Boo = 





下 一 页 


图 5.18 不 同 大 小 的 分 页 栏 图 5.19 翻 页 效果 
SER: 翻 页 元 素 默认 居中 对 齐 ， 如 果 为 列表 元 素 添加 .previous 和 .next 类 ， 可 以 将 “上 一 | 


页 ”/“ 下 一 页 ”按钮 设置 为 两 端 对 齐 。 


58 标签 与 徽章 


标签 一 般 用 于 对 内 容 进 行 标记 ， 常 用 在 内 容 审核 后 台 ， 如 图 5.20 所 示 。 


论坛 管理 系统 ETE Med 
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dez ER ARB 20:25:12: 108] 1052 ~ 
ADARAAT. GRAB Xs Y 
E SFAT. satiata mu » 
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ARSEART. BRAD ERR hd 
点 吉星 可 了 emi ~ 
E RZARHAT. xia > 
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520 ”内 容 审核 后 台 


Bootstrap 内 置 了 6 种 常用 的 标签 ， 分 别 为 default GRU), primary (Æ), success 


.41 。 


DW 
| GRID. info GA), waming 警告)、danger〔 危 险 操作 )。 它 们 分 别 对 应 不 同 的 颜色 ， 
| 例如 下 列 代码 ， 效果 如 图 5.21 所 示 : 
<span class="label label-default">Default</span> 


| CR ~ Ds 0 KAA KIA 


ah) | <span class="label label-primary">Primary</span> 
ot <span class="label label-success">Success</span> 

<span class-"label label-info">Info</span> 
ore ! «span class-"label label-warning">Warning</span> 


<span class-"label label-danger">Danger</span> 


除了 标签 之 外 ， 还 有 一 种 提示 信息 很 常用 ， 很 多 网 站 都 有 消息 系统 来 提示 用 户 有 未 读 
| dig. AS EA, Bootstrap bianca CE), WE 5.22 所 示 。 


E oo 
图 5.21 6 种 标签 类 图 5.22 徽章 
5.22 的 代码 如 下 : 
<button class="btnbtn-primary"> 
未 读 消息 
<span class="badge pull-right">24</span> 
| </button> 
(00 徽章 的 应 用 很 简单 ， 只 需要 给 行内 元 素 添加 -badge 类 即 可 。 
| 注意 : 当 没 有 新 的 或 未 读 条 目 时 ， 没 有 内 容 的 徽章 会 消失 (通过 CSS 的 :empty 选择 器 实现 )， 
| 在 IE9 版 本 以 下 的 TE 浏览 器 徽章 不 会 自动 消失 ， 因 为 不 支持 :empty 选择 器 。 


59 缩 略 图 


| 在 Bootstrap 中 ， 配 合 栅 格 系统 可 以 很 容易 地 构建 带 链接 的 缩 略 图 ， 并 让 缩 略 图 支持 
| isum. 如 图 5.23 所 示 。 


uae ize Le 


E523 缩 略 图 
图 5.23 的 代码 如 下 : 


<div class="row"> 
<div class="col-xs-2"> 
<a class="thumbnail"> 
<img src-"http://pic16.nipic.com/20110826/8064486 224449386194 2.jpg"> 
</a> 
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</div> 
<div class="col-xs-2"> 
<a class="thumbnail"> 
<img src-"http://picl6.nipic.com/20110826/8064486 224449386194 2.jpg"> 


</a> | / 
</div> | EL 
<div class="col-xs-2"> 

<a class="thumbnail"> |_ Note 


<img src-"http;//picl6.nipic.com/20110826/8064486 224449386194 2.jpg"> 
<la> 
</div> 
</div> 


构建 缩 略 图 整体 上 还 是 依赖 Bootstrap 的 栅 格 系统 ， FOR RGR ， 
的 宽度 比例 ， 保 证 缩 略 图 集 的 响应 式 。 这 里 需要 给 图 片 链接 加 上 .thumbnail 类 以 添加 边框 | 
样式 并 调节 图 片 间距 。 

如 果 将 上 例 中 的 <a href="#" class="thumbnail"> 标 签 改 为 <div class="thumbnail">, 就 可 | | 
以 在 图 片 下 方 追加 内 容 ， 如 图 5.24 所 示 。 | 


ie 


FREES 
个 神 , REAR 
ABRE 
图 5.24 ”为 缩 略图 追加 内 容 
图 5.24 的 代码 如 下 : 
<div class="row"> 
<div class="col-xs-2"> 
<div class="thumbnail"> 
<img src-"img/pic.jpg" 


<div class="caption"> 
<p> 花 干 骨 是 世间 最 后 一 个 神 ， 同 时 也 是 人 见 人 怕 的 天 笋 孤 星 …</p> 
<p><a href="#" class-"btnbtn-primary" role="button"> 查 看 详情 </a></p> 
</div> 
</div> 
</div> 
</div> 


5.10 @ 板 


很 多 时 候 需 要 将 某 些 内 容 放 到 一 个 容器 里 ， 此 时 可 以 使 用 Bootstrap 的 面板 组 件 ， 最 l 
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| az 
”简单 的 面板 如 图 5.25 所 示 。 
| 
EF) | 图 525 面板 的 基础 样式 
可 以 看 到 ， 面 板 的 作用 就 是 加 上 了 容器 的 边框 并 设置 了 内 容 与 容器 间 的 边 距 ， 对 应 最 


简单 面板 样式 的 代码 如 下 ; 
| <div class="panel panel-default"> 
<div class="panel-body"> 基 础 面板 示例 </div> 
</div> 
可 以 为 面板 添加 header 和 footer, WI 5.26 所 示 。 


面板 页 头 


需要 和 快 船 的 第 二 轮 第 一 场 比赛 在 俄 克拉 荷 马 打响 ,客场 作 战 快 船 攒 借 保罗 第 
一 节 5 记 三 分 早早 建立 两 位 数 领先 黄 定 胜局 ， 手 感 热 得 发 源 的 保罗 最 终 14 投 12 
中 ,包括 9 投 8 中 的 三 分 球 砍 下 32 分 10 次 助攻 帮助 快 船 以 122-105 大 胜 震 要 先 

下 一 城 ， 并 将 总 比分 改写 为 1-0 领 先 。 


meam 


| 图 5.26 添加 了 header 和 footer 的 面板 
带 有 header 和 footer 的 面板 代码 如 下 : 


<div class="panel panel-default"> 
«div class="panel-heading"> 面 板 页 头 </div> 
<div class="panel-body"> 
<p> 面 板 内容 省 略 …</p> 
</div> 
<div class="panel-footer"> 面 板 页 脚 </div> 
</div> 
| 面板 代码 的 配色 和 之 前 介绍 的 标签 是 一 致 的 ， 都 是 对 应 诸如 succsee, warning. danger 
| 等 状况 的 颜色 ， 从 代码 中 可 以 很 容易 看 出 来 : 


<div class="panel panel-primary"> 
<div class="panel-heading"> 面 板 页 头 </div> 
<div class="panel-body"> 面 板 内 容 .…</div> 
</div> 
<div class="panel panel-success"> 
<div class="panel-heading"> 面 板 页 头 </div> 
<div class="panel-body"> 面 板 内容 .…</div> 
</div> 
<div class="panel panel-info"> 
<div class="panel-heading"> 面 板 页 头 </div> 
<div class="panel-body"> 面 板 内 容 .…</div> 
</div> 
<div class="panel panel-warning"> 


S 
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«div class-"panel-heading" [f H </div> 
«div class-"panel-body" [ii Al &...</div> 

</div> 

<div class="panel panel-danger"> | 
<div class="panel-heading"> 面 板 页 头 </div> | ar) 
<div class="panel-body"> 面 板 内容 …</div> Dom 


pn | Note 


最 终 效 果 如 图 5.27 所 示 。 | 


面板 内 容 


面板 页 头 





面板 内 容 


面板 页 头 | 
面板 内 容 
面板 页 头 | 


面板 内 容 ， 


面板 页 头 


面板 内 容 


图 5.27 不 同 配 色 的 面板 | 
51 ik 度 条 


进度 条 常用 于 文件 上 传 /下 载 、 内 容 的 加 载 等 场景 ，Bootstrap 提供 了 多 种 进度 条 样式 
供 选 择 。 | 


注意 : Bootstrap 以 及 其 他 前 站 组 件 可 解决 进度 条 的 样式 问题 ， 志 中 进度 仍 需 依赖 服务 端 程序 。 
Bootstrap 中 ， 一 个 标准 的 进度 条 如 图 5.28 所 示 。 | 
— ————'aer] 
图 5.28 标准 的 进度 条 








图 5.28 的 代码 如 下 : 
<div class="progress"> 

<div class-"progress-bar" role="progressbar" style="width: 60%:"></div> 
</div> 
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| 为 外 层 的 div 元 素 添加 .progress 类 ， 为 内 层 的 div 元 素 添加 .progress-bar 类 ， 并 控制 内 
| 层 div 宽度 百分比 ， 这 样 就 得 到 一 个 基础 的 进度 条 。 
/ | 进度 条 的 颜色 可 以 根据 需要 用 自 定义 的 颜色 进行 覆盖 ， 也 可 以 调用 Bootstrap 内 置 的 
”类 来 覆盖 ， 如 图 5.29 所 示 。 
为 内 层 的 div 元 素 添加 .progress-bar-success 等 类 就 可 以 获得 如 图 5.29 所 示 的 进度 条 ， 
其 命名 规律 和 Bootstrap 的 标签 类 是 一 致 的 。 


<div class="progress"> 

<div class="progress-bar progress-bar-success" style="width:40%;"></div> 
</div> 
<div class="progress"> 

<div class="progress-bar progress-bar-info" style="width:50%;"></div> 
</div> 
<div class="progress"> 

<div class="progress-bar progress-bar-waning" style="width:60%;"></div> 
</div> 
<div class="progress"> 

<div class="progress-bar progress-bar-danger" style="width:70%:"></div> 
</div> 


可 以 为 进度 条 添加 条 纹 效果 ， 如 图 5.30 所 示 。 


图 5.29 控制 进度 条 色彩 图 5.30 条 纹 效果 进度 条 
实现 条 纹 效果 需要 为 外 层 div 添加 .progress-striped 类 ， 例 如 图 5.30 的 代码 如 下 : 


<div class="progress progress-striped"> 

<div class="progress-bar progress-bar-success" style="width:40%:"></div> 
</div> 
<div class="progress progress-striped"> 

<div class="progress-bar progress-bar-info" style="width:50%:"></div> 
</div> 
«div class="progress progress-striped"> 

«div class="progress-bar progress-bar-waning" style="width:60%:"></div> 

</div> 
«div class="progress progress-striped"> 

<div class="progress-bar progress-bar-danger" style="width:70%:"></div> 
</div> 
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512 多 媒体 对 象 


| 8E 
本 节 讲 解 Bootstrap 中 媒体 对 象 (Media Object), 媒体 对 象 组 件 允许 在 一 个 内 容 块 的 左 | gr 
边 或 右边 展示 多 媒体 内 容 (EG. WS. THD. Dreh dp SUGUU T eee EACUS 
的 组 件 ( 如 博客 评论 )， 可 以 在 组 件 中 使 用 图 文 混 排 ， 图 像 可 以 左 对 齐 或 者 右 对 齐 。 媒 体 ， 
对 象 可 以 用 更 少 的 代码 来 实现 媒体 对 象 与 文字 的 混 排 。 | 
媒体 对 象 轻 量 标记 、 易 于 扩展 的 特性 是 通过 向 简单 的 标记 应 用 class 来 实现 的 。 可以， 
在 HTML 标签 中 添加 以 下 两 种 形式 来 设置 媒体 对 象 。 | 
E] media: % class 允许 将 媒体 对 象 里 的 多 媒体 (图 像 、 视 频 、 音 频 ) 浮动 到 内 容 区 | 
块 的 左边 或 者 右边 。 | 
Ei media-list: 如 果 要 一 个 列表 ， 各 项 内 容 是 无 序列 表 的 一 部 分 ， 可 以 使 用 该 class。 | 
可 用 于 评论 列表 与 文章 列表 ， 如 图 5.31 所 示 。 | 





x 





A. 这 是 一 些 示 例 贸 本 。 LETRA. 这 是 一 些 示 钢 文本 ， 这 是 一 
这 是 X. 这 是 一 些 示 例文 本 。 这 是 一 些 示例 文本 。 这 是 一 些 示例 


TOE. REETIS. 这 是 一 些 示例 文本 。 这 是 一 


Ck. REESE. REECE. Re 





图 5.31 多 媒体 对 象 
代码 如 下 : 


«div class="media"> 
<a class="pull-left" href="#"> 
<img class-"media-object" src="/wp-content/uploads/2014/06/64.jpg" 
alt=" 媒 体 对 象 "> 
</a> 
<div class="media-body"> 
<h4 class="media-heading"> 媒 体 标题 </h4> 
这 是 一 些 示例 文本 。 这 是 一 些 示例 文本 。 
这 是 一 些 示例 文本 。 这 是 一 些 示 例文 本 。 
这 是 一 些 示例 文本 。 这 是 一 些 示 例文 本 。 
这 是 一 些 示例 文本 。 这 是 一 些 示例 文本 。 
这 是 一 些 示例 文本 。 这 是 一 些 示例 文本 。 
</div> 
</div> 
<div class="media"> 
<a class-"pull-left" href="#"> 
<img class-"media-object" src-"/wp-content/uploads/2014/06/64.jpg" 
alt-"I Aor e 






</a> 
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<div class="media-body"> 

<h4 class="media-l heading" "> 媒体 标题 <h4> 
这 是 一 些 示例 文本 。 这 是 一 些 示例 文本 。 
这 是 一 些 示例 文本 。 这 是 一 些 示例 文本 。 
这 是 一 些 示例 文本 。 这 是 一 些 示例 文本 。 
这 是 一 些 示例 文本 。 这 是 一 些 示例 文本 。 


| 这 是 一 些 示例 文本 。 这 是 一 些 示 例文 本 。 
<div class="media"> 
<a class="pull-left" href="#"> 


<img class-"media-object" src-"/wp-content/uploads/2014/06/64.jpg" 
alt=" 媒 体 对 象 "> 





</a> 

<div class="media-body"> 
<h4 class="media-heading" "> 媒体 标题 <h4> 
这 是 一 些 示例 文本 。 这 是 一 些 示例 文本 。 
这 是 一 些 示例 文本 。 这 是 一 些 示例 文本 。 
这 是 一 些 示例 文本 。 这 是 一 些 示例 文本 。 
这 是 一 些 示例 文本 。 这 是 一 些 示例 文本 。 
这 是 一 些 示例 文本 。 这 是 一 些 示例 文本 。 

</div> 

</div> 
</div> 
</div> 


Re K 


| 本 章 主要 讲解 了 常用 的 11 种 Bootstrap 组 件 效果 以 及 其 中 比较 重要 的 类 , 这 些 都 不 难 ， 
”关键 要 熟练 掌握 ， 搭 配 使 用 ， 灵 活 运用 。 
| 导航 组 件 注意 以 下 几 点 : 

(1) 导航 条 即 把 组 件 全 部 横向 排列 放置 ， 包 庄 组 件 ， 类 似 于 横向 导航 的 形式 。 

(2) 确保 可 访问 性 。 使 用 <nav> 标 签 或 者 <div role="navigation">. 

(3) 涉及 导航 条 的 类 。 

分 页 组 件 注意 以 下 几 点 : 

(1) 使 用 类 pagination (加 pagination-lg 类 可 使 其 变 大 )。 

(2) 实现 翻 页 对 齐 与 实现 翻 页 两 端 对 齐 〈 前 和 后 分 别 位 于 两 端 )。 


本 章 作业 
一 、 选 择 题 


1. 下 面 的 代码 会 创建 出 什么 颜色 的 按钮 。( ) 
<button class="btn btn-info"> 查 看 详情 </button> 
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A 
B. 绿色 
e 


D. 红色 


2. 下 面 的 代码 会 创建 什么 类 型 的 表单 元 素 ? 另外 ，input-group-addon 样式 会 实现 什么 
BUR? ( ) 


<div class="input-group"> 
<div class="input-group-addon">+</div> 


<input type-"tel" class="form-control" id="code" name="code" placeholder="Code"> 


</div> 
A. 一 个 输入 电话 号 码 的 文本 框 ， 前 面 有 + 标识 
B. 一 个 电话 号 码 文本 输入 框 
C. 不 正确 
3. 下 面 这 段 代码 会 产生 什么 效果 ? © ) 
<label class="radio inline"> 
<input type="radio" name="optionsRadios" id-"optionsRadios2" value="option2">% 
</label> 
A. 空 的 选择 框 
B. 侦 听 选择 框 
C. 不 正确 
4. 下 面 的 代码 生成 的 表格 当 鼠 标 放 在 第 一 行 时 ， 会 产生 什么 效果 ? (C 
<table class="table table-striped table-hover"> 


A. 第 一 行 会 有 背景 加 深 的 状态 
B. 第 一 行文 字 会 变 大 
C. 不 会 有 任何 变化 
D. 代码 不 正确 
5 下 面 代码 产生 的 结果 是 什么 ? C) 
«div class="panel"> 
<div class="panel-heading"> 
<h3 class="panel-title">Facts At a Glance 
<button class="btnbtn-xs pull-right">&times:</button> 
</h3> 
</div> 
<div class="panel-body"> 
</div> 
</div> 
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A. 标准 的 面板 头 部 显示 
B. 面板 头 部 右 侧 会 有 关闭 按钮 
C. 代码 不 对 
6. 代码 <span>&brvbar</span> 会 显示 什么 ? € ) 
A. 什么 也 不 显示 
B. 小 的 竖 线 
C. 代码 不 正确 
7. 我 们 能 不 去 除 这 个 alert 吗 ? (  ) 


<div class="alert alert-warning alert-dismissible" role="alert"> 
<button type="button" class-"close" 
data-dismiss="alert" aria-label="Close"> 
<span aria-hidden="true">&times;</span> 
</button> 
<strong>Waming:</strong>: Please 
call us to reserve for more than six guests. 
</div> 


A. 不 能 
B. 能 


二 、 操 作 题 


媒体 标题 


RENAE 
ct 这 是 一 些 示人 六 本. 这 是 一 些 示例 文本 。 这 是 一 些 示例 文本 。 这 是 一 些 示例 文本 。 这 是 一 些 
本 . 这 是 一 些 示例 文本 - 


庶 套 的 媒体 标题 
本 。 这 是 一 些 示例 文本 。 这 是 一 些 示例 文本 。 这 是 一 些 示例 文本 。 这 是 一 些 示例 


"HE 吉庆 的 媒体 标题 
Rae 2S TOs. RE nece. 这 是 一 些 示例 文本 。 这 是 一 些 示例 文本 。 这 是 一 些 
$. 这 是 一 些 示例 文本 - 


媒体 标题 
这 是 一 些 示例 文本 。 这 是 一 些 示例 文本 。 这 是 一 些 示例 文本 。 这 是 一 些 示例 文本 。 这 是 一 些 示例 文本 - E 
这 是 一 些 示 例文 本 。 这 是 一 些 示 例文 本 。 这 是 一 些 示 例文 本 。 这 是 一 些 示例 文本 。 这 是 一 些 示例 文本 。 





请 用 多 媒体 对 象 实现 如 图 5.32 所 示 的 效果 。 








图 5.32 媒体 对 象 效果 图 
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LESS 和 SASS 


| 本 章 简介 

CSS 并 不 是 一 门 编程 语言 ， 无 法 完成 像 其 他 编程 语言 一 样 的 谋 套 、 继 承 、 设 置 变量 等 
工作 ， 因 此 很 难 实现 DRY (Don’t repeat yourself， 不 要 重复 你 自己 ) 的 原则 ，CSS 语言 在 
设计 上 显得 有 些 简 陋 , 用 CSS 编写 的 文件 中 常常 充斥 着 大 量 的 重复 的 定义 ,对 于 小 型 项 目 
来 说 ，CSS 的 代码 量 不 大 ， 问 题 没有 凸显 ， 而 如 果 要 开发 和 持续 维护 一 个 较为 大 型 的 项 目 ， 
用 CSS 编写 时 就 很 难 组 织 ， 其 文件 代码 量 宛 余 庞 大 ， 并 且 随 着 项 目 规模 的 逐渐 扩大 ， 维 护 
会 越 来 越 困 难 。 这 就 给 了 CSS 预 处 理 语言 (CSS Preprocessor) 的 出 现 以 契机 ，CSS 预 处 
理 程序 在 保留 CSS 原 有 特性 的 基础 上 ， 提 供 了 额外 的 功能 和 工具 以 改善 CSS 的 语法 ， 使 
得 CSS 也 能 面向 对 象 ， 这 样 既 在 一 定 程度 上 弥补 了 CSS 的 缺陷 ， 也 无 须 设计 一 种 语言 来 
代替 CSS 以 供 浏览 器 识别 。 

目前 流行 的 预 处 理 语言 主要 有 两 种 : LESS 和 SASS。 学 习 阶 段 ， 两 者 都 需要 了 解 ， 而 
在 实际 开发 工作 中 ， 只 要 熟练 使 用 一 种 就 可 以 了 。 


掌握 两 种 目前 最 流行 的 CSS 预 处 理 语言 LESS 和 SASS, 


> 了 解 CSS 的 缺陷 。 
> 了 解 两 种 目前 最 流行 的 CSS 预 处 理 语言 LESS 和 SASS. 
> $22 Compass 的 使 用 方法 。 
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预习 并 回答 以 下 问题 : 

(1) 为 什么 要 用 CSS 预 处 理 语言 ? 
(2) 什么 是 LESS? 

(3) 什么 是 SASS? 


ER 


61 为 什么 要 用 CSS 预 处 理 程序 


| Css 作为 一 门 标记 性 语言 ， 其 语法 简单 易学 ， 可 以 很 好 地 完成 页 面 样式 定义 , 但 CSS 
| 并 不 是 一 门 完美 的 语言 ,如 CSS 需要 书写 大 量 没有 远 辑 的 代码 , 没有 变量 及 合理 的 样式 复 
| 用 机 制 ， 造 成 代码 中 过 多 的 重复 输出 ， 这 些 缺 陷 限 制 了 CSS 编写 的 效率 ， 更 不 符合 Web 
| 项 目 高 效率 开发 的 需求 ， 本 节 就 来 了 解 这 些 延续 了 很 久 的 缺陷 。 


| 6.1.1 CSS 不 能 设置 变量 


| 实际 网 页 项 目 中 会 重复 用 到 一 个 颜色 作为 主 色 , 而 CSS 在 设置 颜色 时 一 般 采 用 十 六 进 
， 制 的 RGB 模式 ， 例 如 #00aff0 这 样 的 格式 ， 但 是 开发 者 很 难 记 住 编号 ， 而 默认 支持 的 red. 
| green、blue 等 颜色 名 称 又 不 够 丰富 ， 所 以 在 实际 工程 中 不 会 广泛 应 用 。 

| 显然 一 个 项 目 不 得 不 重复 引用 ， 如 #00aff0 这 样 的 格式 , 更 糟糕 的 是 ， 如 果 遇 到 项 目 至 
| 完成 阶段 突然 要 求 更 改 主 色 ， 如 把 颜色 #00affo 替换 成 #7fba00， 于 是 开发 者 就 只 能 一 个 一 
| 个 去 替换 ， 这 就 增加 了 开发 和 维护 的 难度 。 那 么 ， 为 什么 不 能 把 一 个 颜色 设置 成 变量 呢 ? 
| 用 那个 变量 贯穿 整个 CSS, 如 果 接 到 修改 主 色 的 需求 , 也 只 需要 改变 这 一 变量 值 就 可 以 了 。 
”遗憾 的 是 ，CSS 并 不 能 满足 这 一 实际 开发 需求 。 

| 再 如 引入 一 些 CSS3 新 样式 时 ， 因 需要 兼容 不 同 的 浏览 器 ， 不 得 不 写 多 行 带 有 属性 前 
| 缀 的 代码 , 为 什么 要 使 用 原生 CSS 重复 编写 呢 ? 如 果 能 用 一 句 简单 的 命令 就 能 实现 这 好 几 
| 行 代码 才能 实现 的 效果 便 可 以 大 大 提升 程序 的 可 读 性 。 


(612 宛 余 重 复 的 代码 


| CSS 的 继承 机 制 是 根据 HTML 的 层级 关系 来 决定 的 , 子 元 素 可 以 继承 父 元 素 的 部 分 属 
| 性, 如 字体 、 背 景 等 。 而 在 实际 开发 中 , 很 多 元 素 拥 有 类 似 的 CSS 样式 , 若 没有 层级 关系 
| 就 只 能 分 别 进行 定义 ， 结 果 就 造成 了 大 量 的 重复 代码 。 虽 然 通过 定义 公共 样式 可 以 减 小 文 
| 件 体 积 ， 但 效果 有 限 。 理 想 的 情况 是 将 通用 的 样式 都 编写 在 一 个 公共 的 库 中 ， 实 现 一 处 定 
|， 义 、 处 处 调用 。 


(6.1.3 无 法 实现 计算 功能 


| CSS 无 法 设置 变量 ， 当 然 也 更 谈 不 上 实现 计算 功能 。 在 CSS 中 , 一般 都 是 开发 者 算 好 
”数值 后 填写 上 去 的 ， 这 就 增加 了 代码 维护 的 难度 。 在 实际 项 目 中 ， 有 很 多 值 都 是 相同 的 ， 
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或 者 是 以 某 个 值 为 基准 进行 计算 的 ， 使 用 带 有 变量 的 表达 式 更 为 合理 ， 也 符合 开发 需求 ， 
不 仅 方便 编写 和 维护 ， 而 且 可 以 大 大 降低 犯错 的 概率 。 
例如 ， 设 定 了 一 个 基准 字体 “base-font-size=15px:”， 所 有 的 字体 大 小 都 以 它 为 基准 : 
-a(font-size:15px:) 
.b {font-size:14px:} 
-c (font-size:30px:) 
.d {font-size:20px:} 


一 旦 修改 基准 字体 base-font-size 的 值 ， 那 么 .a、.b、.c、.d 四 处 定义 都 必须 重新 计算 并 


修改 ， 如 果 代码 量 较 大 ， 维 护 难 度 可 想 而 知 。 遇 到 这 种 情况 可 以 通过 以 下 方法 来 改进 : 


$bf:15px; 

.a{font-size: $bf;} 
.b{font-size:$bf -1px:) 
.c {font-size:2$bf:} 
-d(font-size:$bf-5px:) 


这 样 只 需 修改 $bf 的 值 就 完成 了 ， 但 这 种 写法 在 原生 CSS 中 并 不 支持 。 
6.1.4 命名 空间 与 作用 域 


当 项 目 经 多 位 技术 背景 和 水 平 参差 不 齐 的 工程 师 开 发 与 维护 后 ， 项 目 文件 中 会 附带 许 | 
多 开发 者 不 想 要 的 样式 ， 命 名 空间 与 作用 域 解决 了 全 局 样式 污染 的 问题 。CSS 通过 子 元 素 | 


选择 器 或 后 代 元 素 选择 器 可 以 实现 命名 空间 与 作用 域 ， 例 如 下 面 的 代码 : 


.Section-main div list_style{ 
list-style:none; 

} 

.section-main .container { 
margin:0 auto; 
width:970px: 

} 

.Section-main text_dec{ 
text-decoration:none: 


} 


在 开发 中 ， 为 了 避免 选择 器 污染 ， 有 时 可 能 会 过 度 依赖 于 ID 选择 器 和 很 复杂 的 class | 
选择 器 。 在 上 例 中 ， 所 有 样式 都 在 class-"section-main'763K [KI GULIE R7 SAR, [BEAR | 


时 每 一 句 定义 都 需要 添加 .section-main 语句 ， 这 种 写法 在 需要 添加 命名 空间 时 非常 麻烦 ， 
如 要 给 下 面 的 定义 统一 添加 .section-main 的 命名 空间 : 


div list style { 
list-style:none; 

} 

-container { 
margin:0 auto: 
width:970px: 

} 
text dec { 
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text-decoration:none; 
j 
€ URGE BAILA AE, ER HSI cB 8 [n] RAE E ER 
(6.15 ”CSS 缺陷 总 结 


CSS 作为 一 种 简单 易学 的 标记 语言 一 直 在 不 断 地 完善 .编写 CSS 文件 是 前 端 工作 中 一 
， 项 普通 而 又 频繁 的 工作 ， 由 于 其 没有 变量 、 函 数 、 混 合 、 不 能 进行 运算 ， 无 法 方便 地 继承 
| 和 模块 化 ,使 得 开发 者 不 得 不 反复 地 做 很 多 类 似 的 工作 。 而 本 章 将 要 介绍 的 CSS 预 处 理 语 
， 言 就 是 为 填补 这 一 部 分 功能 ， 预 处 理 语 言 是 一 种 类 CSS 的 语言 ， 可 以 简化 CSS 的 编写 ， 

| 并且 降低 CSS 的 维护 成 本 ， 用 更 少 的 代码 做 更 多 的 事情 ， 巧 妙 地 弥补 了 Css 的 不 足 。 


6.2 LESS 的 应 用 


| 预 处 理 语言 的 出 现 就 是 为 了 解决 CSS 的 种 种 不 足 ， 目 前 来 说 ， 使 用 CSS 预 处 理 语言 
”是 弥补 CSS 语言 不 足 的 最 有 效 方式 ， 而 LESS 则 正 是 目前 应 用 最 为 广泛 的 一 种 。 


(6.21 LESS 介绍 


| LESS (全 称 LESSCSS) 诞生 于 2009 年 ， 是 一 种 动态 样式 语言 ， 属 于 CSS 预 处理 语 
| 言 的 一 种 ， 它 使 用 类 似 CSS 的 语法 ， 为 CSS 赋予 了 动态 语言 的 特性 ， 如 变量 、 继 承 、 运 
| 算 、 函 数 等 ， 更 方便 CSS 的 编写 和 维护 。LESS 既 可 以 在 多 种 语言 、 环 境 中 使 用 ， 如 可 以 
”在 客户 端 上 运行 (支持 IE6+、webkit 核心 浏览 器 、Firefox)， 也 可 以 借助 Nodejs 或 Rhino 
的 服务 端 运行 。 

| LESS 使 用 CSS 的 语法 ， 让 大 部 分 开发 者 和 设计 师 更 容易 上 手 ， 虽 然 比 起 SASS K, 

可 编程 功能 不 够 ， 但 因为 使 用 简单 和 兼容 CSS， 因 而 在 互联 网 社区 的 支持 者 是 最 多 的 ， 尤 
”其 是 中 文 互联 网 的 汉化 是 所 有 预 处 理 语言 中 最 好 的 。 对 于 国内 的 开发 者 来 讲 ，LESS 学 习 
| 成 本 最 低 ， 而 且 它 的 源码 采用 的 是 JavaScript 这 款 大 多 数 前 端 工 程 师 都 熟悉 的 脚本 语言 ， 
”对 应 的 工具 开发 也 有 开发 者 社区 强 有 力 的 扶持 。LESS 中 文 网 站 如 图 6.1 所 示 。 








less; 


一 种 动态 样式 语言 . 


LESS 将 CSS MTT ys. ESS. SOR. 
ER, EH. LESS ETME EAI LEAT GME 6t, 
Webkit, Firefox), tam DHi&3Node sse Rhinose fg 
SET. 





图 6.1 LESS 中 文 首页 
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6.2.2 LESS 使 用 基础 


按 LESS 的 语法 规则 写 好 的 扩展 名 为 .less 的 文件 只 有 编译 为 扩展 名 为 .css 的 文件 后 才 | | 


能 被 浏览 器 识别 ， 为 方便 学 习 ， 建 议 初 学 者 用 编译 工具 来 编译 .less 文件 ， 下 面 是 一 LE 
的 LESS 编译 工具 。 

(1) Koala， 国 内 开发 的 LESSCSS/SASS 编译 工具 。 全 平台 的 LESS/SCSS 编译 工具 ， 
下 载 地 址 ， http://koala-app.com/index-zh.html。 





(2) Codekit, MAC 下 自动 编译 Less/Sass/Stylus/CoffeScript/Jade/haml 的 工具 ， 含 语 | 


法 检查 、 图 片 优化 、 自 动 刷新 等 附加 功能 ， 下 载 地 址 : https://codekitapp.com/. 
(3) WinLess, Windows 下 的 LESS 编译 软件 ， 下 载 地 址 : http://winless.org/。 


(4) SimpleLess， 全 平台 LESS 编译 软件 ， 适 用 于 Windows、Linux 和 MAC wR 


统 。 下 载 地 址 : http://wearekiss.com/simpless。 
除了 使 用 编译 工具 ，LESS 还 提供 浏览 器 端 使 用 的 方法 ， 步 骤 如 下 : 
(1) 下 载 LESS 的 js 文件 ， 例 如 less.js. 
(2) 在 页 面 中 引入 .less 样式 文件 : 


<link rel-"stylesheet/less" href=" http://localhost/ styles.less" /> 


需要 注意 rel 属性 的 值 是 stylesheet/less， 而 不 是 stylesheet。 客 户 端 调试 方式 下 需要 引 | 


入 http 链接 的 .less 样式 文件 ， 使 用 本 地 的 .less 文件 会 报错 。 
(3) 引入 第 一 步 下 载 的 js 文件 ， 在 <head> 中 引入 : 


<script src="less.js" type="text/javascript"></script> 
注意 : LESS 样式 文件 一 定 要 在 引入 less.js 前 先 引入 。 
完成 这 3 个 步骤 后 ， 刷 新 网 页 就 可 以 看 到 修改 LESS 文件 后 发 生 的 变化 了 。 


6.23 ”使 用 变量 


在 LESS 中 ， 使 用 @ 关 键 字 进 行 变量 的 定义 。 如 下 面 的 这 个 示例 : 


/*LESS 代码 */ 
@color:#4D926F; 
#header{ 

color:@color: 
} 
n2{ 

color:@color: 


} 
/编译 后 的 CSS 代码 */ 
#header{ 
color: #4D926F: 
} 
iot 
color: #4D926F: 
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Note 





| 这 样 ， 只 需要 记 住 @color 这 个 有 实际 意义 的 变量 名 称 ， 就 无 须 在 编码 时 去 粘贴 复制 难 
| 记 的 十 六 进 制 RGB 代码 ， 并 且 对 于 整体 的 配色 调整 ， 例 如 主 色 修改 只 需要 修改 @color 的 
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， 值 就 可 以 完成 全 局 的 更 新 ， 极 大 地 方便 了 后 期 的 维护 。 


6.24 使 用 混合 


混合 可 以 将 一 个 定义 好 的 class A 轻松 地 引入 到 另 一 个 class B 中 ， 从 而 简单 实现 class 
| B Af class A 中 的 所 有 属性 。Mixin 还 可 以 带 参数 地 调用 ， 就 像 使 用 函数 一 样 ，Mixin 是 
”可 以 重用 的 代码 块 。 

Mixin 在 实际 开发 中 的 具体 作用 就 是 把 一 些 通用 的 样式 抽取 出 来 ， 以 后 就 无 须 编 写 重 
， 复 的 代码 了 。 对 于 CSS, 尤其 是 CSS3 被 引入 之 后 ， 由 于 各 大 浏览 器 厂商 推行 各 自 的 标准 ， 
”导致 开发 者 为 了 浏览 器 兼容 性 必须 编写 大 量 带 有 属性 前 缀 的 代码 。Mixin 用 在 这 里 正 是 再 


| 合适 不 过 了 ， 如 下 面 这 个 示例 : 


/*LESS 源码 :*/ 





Tounded-corners((@radius:Spx){ 
-webkit-border-radius:@radius; 
-moz-border-radius:@radius: 
-o-border-radius:@radius; 
border-radius:@radius: 

} 

#header { 

-rounded-corners; 

} 

#footer { 
-rounder-corners(10px): 


j 
/# 编 译 后 的 CSS 代码 : */ 


ffheader( 
-webkit-border-radius: 5px: 
-moz-border-radius: 5px : 
-o-border-radius: Spx: 
border-radius: 5px: 

5 

#footer { 
-webkit-border-radius: 10px: 
-moz-border-radius: 10px : 
-o-border-radius: 10px: 
border-radius: 10px: 

} 


| Mixin 的 语法 关键 字 是 一 个 符号 ， 可 以 将 其 联想 记忆 为 CSS 选择 器 中 的 类 。 通 过 这 个 
”示例 可 以 看 到 ， 对 于 像 贺 角 这 类 的 需要 属性 前 级 的 CSS3 属性 ， 以 及 其 他 类 似 的 通用 模块 
| 都 可 以 采用 Mixin， 从 而 实现 一 次 定义 ， 无 限 使 用 ， 既 可 以 大 大 缩减 无 谓 的 重复 定义 ， 又 
， 提 高 了 代码 的 可 读 性 和 可 维护 性 。 
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6.2.5 RERU 





REALM n] UAE — I e FR a REN MERR RAR iS BEN, 这样 很 大 | 


程度 减少 了 代码 量 , 并且 代码 看 起 来 更 加 的 清晰 。 之 前 我 们 在 讨论 CSS 的 缺陷 时 曾经 举 了 
这 样 的 一 个 例子 : 

-section-main div li { 
List-style:none; 

} 

.section-main .container { 
Margin:auto; 
Width:960px: 

} 

.Section-main a { 
Text-decoration:none; 


} 
如 果 使 用 LESS 编写 : 


.Section-main { 
div lif 
List-style:none; 


Text-decoration:none: 


这 样 代码 更 为 简洁 ， 并 且 更 易于 维护 。 
6.26 ”函数 和 运算 


任何 数字 、 颜 色 或 者 变量 都 可 以 参与 运算 ， 这 样 就 可 以 实现 属性 值 之 间 的 对 照 关 系 。 
例如 : 


@the-border: 1px: 

@base-color: #111: 

@red: #842210: 

#header { 
color: (@base-color * 3); 
border-left: @the-border: 
border-right: (@the-border * 2): 

} 

#footer { 
color: (@base-color + #003300): 
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band 

border-color: desaturate(@red, 10%): 
} 
编译 后 的 CSS: 


#header ( 
color: #333; 
border-left: 1px: 
border-right: 2px: 

} 

#footer { 
color: #114411; 
border-color: #742717; 

} 


LESS 的 运算 能 够 分 辨 出 颜色 和 单位 ， 例 如 : 
@length:10px+8; 

LESS 会 输出 18px。 

可 以 使 用 括号 来 改变 运算 的 优先 级 : 


height:(@het+10)*2: 
可 以 在 复合 属性 中 进行 运算 ， 例 如 : 
border:(@wit *2) solid black: 


(62.7 LESS 语言 总 结 


LESS 目前 已 成 为 行业 内 流行 的 CSS 预 处 理 语言 , 它 的 核心 优势 是 简单 易学 、 文 档 丰 富 、 


| 拥有 多 种 图 形 化 的 编译 工具 ， 并 且 LESS 是 采用 前 端 开发 者 熟悉 的 JavaScript 语言 编写 的 。 


使 用 LESS， 可 以 较 好 地 解决 CSS 编写 中 暴露 出 的 不 能 进行 变量 定义 、 无 法 计算 、 重 


| 复 代码 过 多 、 难 以 进行 嵌 套 和 命名 空间 的 设置 等 显著 问题 ，LESS 就 像 它 的 名 字 一 样 ， 让 
| 开发 者 用 更 少 的 代码 做 更 多 的 事情 。 


6.3 SASS 的 应 用 


SASS 于 2007 年 诞生 ， 是 出 现 较 早 且 非 常 成 熟 的 CSS 预 处 理 语言 ， 有 比 LESS 更 为 强 


| 大 的 功能 ，SASS 的 一 个 关键 特性 是 缩 进 式 的 语法 ， 不 过 开发 者 需要 花费 时 间 学 习 其 新 的 
， 语 法 以 及 重新 构建 现 有 的 样式 表 。 由 于 其 强大 的 功能 和 拥有 ruby 社区 的 大 力 推动 , 逐渐 被 
| 更 多 开发 者 选择 使 用 ， 目 前 受 LESS 影响 ， 已 经 进化 到 了 全 面 兼容 CSS 的 SCSS。 


6.3.1 SASS 介绍 


SASS (Syntactically Awesome Stylesheets) 是 采用 Ruby 语言 编写 的 一 款 CSS 预 处 理 语 


| 言 ， 最 开始 的 语法 叫 作 “ 缩 进 语法 ” 与 Haml 〈 一 种 缩 进 式 HTML 预 编译 器 ) 284, SASS 
| ‘BPA Chttp://sass-lang.com/) 如 图 6.2 所 示 。 
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CSS with superpowers 








Sass is the most mature, stable, and powerful 


professional grade CSS extension language in 


the world 





图 6.2 SASS 官方 网 站 


6.3.2 SASS 安装 和 使 用 


SASS 是 采用 Ruby 语言 编写 的 , 不 过 不 懂 Ruby, 一 样 可 以 使 用 SASS. paises: | 
装 Ruby， 才 能 安装 使 用 SASS， 因 此 使 用 SASS 相对 于 LESS 要 复杂 一 些 。 | 

第 一 步 : 先 从 官网 下 载 Ruby 并 安装 ( 注 : mac 下 自 带 Ruby 无 须 再 安装 Ruby!)。 | 

第 二 步 : Ruby 安装 完成 后 ， 在 终端 输入 gem install sass 进行 安装 ， 安装 完成 后 就 可 以 | 
使 用 SASS 命令 了 。 在 终端 输入 sass-help 可 以 查看 SASS 命令 的 选项 。 | 


6.3.3 ”使 用 变量 
SASS 的 变量 关键 字 和 PHP 一 样 ， 都 是 以 开头 ， 例 如 : | 
$primary-color:#00aff0; | 
div{ | 


color: $primary-color:; 
} 


编译 后 的 CSS 代码 是 : 
div{ 

color: #00aff0: 
} 


SASS 还 允许 将 变量 镶嵌 在 字符 串 之 中 ， 语 法 也 和 Ruby 一 样 ， 变 量 必须 写 在 #{} 中 。 
例如 : 


Sblue: #3bbfce: 
$margin: 16px: 
$side:left: 
rounded { 
border-color: $blue: 
color: darken($blue, 10%) 
border-# (side) -radius:5px: 
} 
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编译 后 的 CSS 代码 就 是 : 


-Tounded{ 
border-color: #3bbfce: 


yr) | color: #2b9eab; 
Se border-left-radius:Spx: 


i 
(634 计算 


和 LESS —#¥, SASS 允许 直接 在 代码 中 使 用 算式 ， 并 且 支 持 变量 和 函数 ， 例 如 ， 
$var:1200px; 
body{ 
margin:(24px/2): 
padding:piOpx: 
top:50px + 80px; 
right: $var * 1096; 
} 
转换 为 CSS 就 是 : 
| bodyt 
| margin: 12px: 
| padding:3.14159px: 
| top:130px: 
right:120px: 
} 


| 6.35 RE 


Al LESS 一 样 ，SASS 允许 选择 器 柑 套 。 例 如 : 
div{ 
hi { 
color:blue 
} 
} 


编译 后 的 CSS 就 是 : 


div hi { 
color : red: 


= 
(636 ”代码 重用 
(00 使 用 @import 插入 文件 


@import 可 以 用 来 插入 外 部 文件 ， 例 如 : 
@import "path/filename.scss": 
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如 果 插 入 的 是 CSS 文件 ， 则 等 同 于 CSS 的 import 命令 。 
@import "foo.css": 


ER: Cimport 的 顺序 和 先后 有 关 ， 权 重 较 高 的 文件 应 当 放 在 靠 后 的 位 置 引入 。 | & 


2. 4 extend 继承 


SASS 人 允许 一 个 选择 器 继承 另 一 个 选择 器 ， 具 体 到 这 里 就 是 可 以 通过 @extend 关键 字 ， 
来 继承 一 个 已 有 的 定义 。 例 如 下 面 这 个 示例 : | 

.classl( 

border:1px solid #ddd; 

} 

.Class2{ 

@extend .class1; 

font-size:120%; 

} 


class2 完全 继承 了 class] 中 的 定义 ， 拥 有 一 样 的 边框 ， 同 时 class2 中 自己 定义 的 字体 
大 小 为 120%。 | 
3， 使 用 @mixin 混入 
使 用 @mixin 命令 ， 可 以 定义 一 个 代码 块 ， 示 例如 下 : 


@mixin f left{ 
float:left; 
margin-left:10px; 
} 
使 用 @include 命令 ， 调 用 这 个 Mixin: 
div{ 
@include f left; 
} 
fll LESS 一 样 ，SASS 的 Mixin 也 支持 参数 。 
@mixin left($value: 10px) { 
float: left: 
margin-right: $value: 
} 
使 用 的 时 候 ， 根 据 需要 加 入 参数 : 
div { 
@include left(20px): 
} 
4. 使 用 @function 定义 函数 


SASS 允许 用 户 编写 自己 的 函数 ， 例 如 : 


@fuction double($n) { 
@return $n * 2: 
} 
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#sidebar{ 
width:double(5px): 
} 


(637 高 级 用 法 


编程 语言 都 有 程序 控制 语句 来 控制 代码 的 运行 方向 。 SASS 中 也 有 @if、 @else、 @while 
， 等 控制 语句 。 
CD @if 可 以 用 来 判断 : 
pt 


@if 1 + 1 = 2 ( border:1px solid; } 
@if 5 <3 ( border:2px dotted: } 
} 
配套 的 还 有 @else 命令 : 
@if lightness($color)>30%{ 
Background-color:#000: 


}@else{ 
background-color:#fff: 


| } 
| (2) 循环 语句 。 
SASS 支持 for 循环 : 
@for $i form 1 to 10{ 
-border-# {$i} { 
border:#{$i}px solid blue: 
} 
} 
(3) SASS 也 支持 while 循环 : 
$i: 6: 
@while $i > 0( 
.item-#{$i} (width: 2em * $i: } 
$i: $i -2; 
} 
(4) each 命令 ， 作 用 与 for 类 似 : 
@each $member in a, b, c. d { 
Jt ($member) { 
background-image: url("/image/#{$member} jpg"): 
} 
} 
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| SASS 是 较 早 的 CSS 预 编译 语言 ， 发 展 到 今天 ， 其 功能 也 越 来 越 强大 。 和 LESS 相 比 
”有 更 为 强大 的 语法 基础 ， 如 支持 分 支 和 循环 操作 、 支 持 自 定义 函数 。 但 是 由 于 其 开发 语言 
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Ruby 在 前 端 领域 不 如 JavaScript 流行 ， 以 及 SASS 一 开始 采取 的 缩 进 式 语法 等 原因 ,致使 
SASS 的 流行 度 不 如 LESS。 | 
在 实际 项 目 开发 中 ，SASS 与 Compass 结合 是 比 LESS 更 强大 的 工具 ， 但 是 若 实际 项 | 
目 不 需要 这 些 更 强 的 功能 ， 也 要 考虑 SASS 的 学 习 成 本 比 LESS 更 高 。 现 实 项 目 开发 中 应 Ef) 
该 根据 项 目 需求 以 及 结合 自身 团队 的 情况 选择 适合 的 技术 。 





6.4 使 用 SASS 的 扩展 库 Compass 


在 实际 项 目 开发 中 很 多 样式 都 是 通用 的 ， 如 reset CER CSS 样式 )、CSS3 中 带 有 属 ， 
性 前 级 的 兼容 各 大 浏览 器 的 代码 、 链 接 的 颜色 、 下 划 线 等 设置 。 如 果 开 发 者 决定 使 用 CSS | 
预 处 理 语言 ， 在 开始 一 个 项 目 时 ， 重 新 定义 这 些 Function 也 是 一 件 不 小 的 工程 ， 基 于 软件 ， 
开发 工程 中 “不 要 重复 造 轮子 ”的 原则 ,Compass 应 运 而 生 , 毫 不 夸张 地 说 , 学 会 了 Compass, | 
CSS 开发 效率 会 上 一 个 台阶 。 | 

SASS 可 以 让 CSS 的 开发 和 维护 变 得 简单 便捷 。 但 是 ，SASS 只 有 搭配 Compass, 它 | 
才能 真正 发 挥 其 强大 的 威力 。Compass 是 一 个 基于 SASS 的 类 库 ， 官 网 如 图 6.3 所 示 , 项 | 
目 主页 的 地 址 是 http://compass-style.org， 它 已 经 为 开发 者 预定 义 好 了 很 多 常用 的 Mixsin 和 | 
Function。Compass 由 以 下 几 个 模块 组 成 。 | 


Install Help & Documentation Code Reference Blog Contribute 


compass 


is an open-source CSS Authoring Framework. 


Why designers love Compass uses Sass. 
Compass. 





图 6.3 Compass 官方 网 站 


注意 : 目前 LESS 中 还 没有 像 Compass 一 样 成 熟 且 有 影响 力 的 类 库 ， 如 果 项 目 需要 的 话 ， 
可 以 用 Comless 和 VeryLess 两 个 类 似 的 库 来 实现 。 


Compass 采用 模块 结构 ， 不 同 模块 提供 不 同 的 功能 。 目 前 ， 它 内 置 5 MER: Reset. 
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m ~ Recta to 6 A KB 
| CSS3. Utilities, Typography 和 Layout 模块 ,下面 将 主要 介绍 前 3 个 内 置 模块 ,除了 Compass 
O 本 身 的 内 置 模块 ， 开 发 者 还 可 以 加 载 第 三 方 模块 ， 或 者 编写 自 定义 模块 。 


会 办 6.4.1 Reset 模块 


Reset 模块 是 浏览 器 的 重 置 模块 ， 用 于 减少 浏览 器 的 差异 性 ， 即 重 置 浏览 器 间 的 差异 
| 性 。 它 的 功能 类 似 Bootstrap 3 中 集成 的 normalize.css， 清 除 浏览 器 的 默认 样式 ， 保 持 网 站 
| 在 不 同 浏览 器 下 有 一 致 的 视觉 外 观 。 
| 要 使 用 Reset 模块 首先 要 在 SASS 文件 头 部 引入 : 

@import "compass/reset"; 

这 样 就 可 以 实现 清除 浏览 器 的 默认 样式 了 。 
| Reset 模块 不 同 于 其 他 样式 模块 设置 方案 ，Compass 不 仅仅 提供 全 局 的 样式 重 置 ， 还 
| 可 以 针对 某 些 指定 元 素 进行 重 置 。 例 如 使 用 reset-box-model 进行 盒子 模型 的 重 置 ; 

div{ 

i @include reset-box-model: 
} 
可 以 去 除 div 标签 盒子 模型 的 内 外 边 距 和 边框 。 
再 如 用 reset-display 对 元 素 的 display 进行 重 置 : 
Inline box( 
@include reset-display; 


} 
这 样 可 以 恢复 元 素 之 前 设置 的 display 值 。 


6.4.2 CSS3 模块 


| Compass 的 CSS3 模块 实际 就 是 将 开发 中 经 常用 到 的 CSS3 属性 用 语义 很 强 的 Mixin 
| 进行 了 封闭 ,节约 了 开发 者 自己 定义 的 时 间 。 目 前 ， 该 模块 提供 19 种 CSS3 命令 。 在 这 里 
”介绍 其 中 的 两 种 : 透明 和 圆 角 。CSS3 模块 也 是 Compass 应 用 最 为 广泛 的 模块 要 使 用 CSS3 
| 模块 ， 首 先 要 在 SASS 文件 头 部 引入 : 
| @import "compass/css3" 

下 面 举 两 个 例子 为 读者 介绍 Compass 的 CSS3 模块 的 用 法 。 

l 元素 透明 度 的 设置 
[00 第 1 个 例子 是 元 素 透 明度 的 设置 。IE9 以 前 TE 浏览 器 是 不 支持 opacity 属性 的 ， 而 同 
， 样 的 效果 需要 用 到 IE 独 有 的 滤 镜 来 实现 ， 但 很 多 开发 者 不 容易 记 住 滤 镜 的 写法 。 此 时 使 
| FA Compass 就 非常 简单 了 : 
| #opacity { 


@include opacity(0.5): 
} 


简单 的 一 行 定义 就 解决 了 这 个 问题 。 





下 面 是 Compass 中 对 opacity 这 个 Mixin 的 实现 : 


@mixin opacity(Sopacity) ( 


@if Slegacy-support-for-ie6 or $legacy-support-for ie7 or Slegacy-support-for-ie8 { 
filter: unquote("progid:DXImageTransform. Mircrosoft.Alpha(Opacity=# {round($opacity100)})"): 


} 
opacity: $opacity: 
} 
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实际 上 它 是 将 正常 的 opacity 属性 和 TE 的 滤 镜 写 在 了 一 个 Mixin 中 ， 在 使 用 中 ， n 


3E Hj include 关键 字 对 Mixin 进行 调用 即 可 。 
2. DARE 
fä Cborder-radius) 的 写法 是 : 


rounded { 
@include border-radius(Spx): 
} 


一 个 角 为 圆 角 ， 例 如 : 


族 分 别 为 4 个 角 设置 不 同 的 圆 角 弧度 */ 
#border-radius{ 

@include border-radius(25px): 
} 
siborder-radius-top-left ( 

@include border-top-left-radius(25px): 
} 
#border-radius-top-Iright ( 

@include border-top-right-radius(25px): 
} 
#border-radius-bottom-left { 

@include border-bottom-left-radius(25px): 
} 
#border-radius-top { 

@include border-top-radius(25px): 


} 

#border-radius-bottom { 
@include border-bottom-radius(25px): 

H 

#border-radius-combo { 
@include border-coner-radius(top.left.40px): 
@include border-corner-radius(top.right.5px): 
@include border-comer-radius(bottom.left.15px): 


@include border-corner-radius(bottom.right.30px): 


} 


第 2 个 例子 是 圆 角 的 设置 。Compass 不 仅 简单 地 支持 4 个 角 都 是 圆 角 ， 还 支持 指定 哪 | 


/*4 个 角 全 是 圆 角 */ 

Ic Efü Sl fat 

aL fA fa*/ 

/# 左 下 角 为 圆 角 所 

/# 上 方 两 个 角 是 圆 角 所 

放下 方 两 个 角 为 圆 角 */ 

/# 设 置 4 个 弧度 不 同 的 圆 角 */ 
人 * 左 上 角 为 40px 的 圆 角 */ 
PAEH Spx 的 圆 角 */ 


/* 左 下 角 为 15px 的 圆 角 */ 
/* 右 下 角 为 30px 的 圆 角 / 


上 述 代码 除了 最 后 4 个 角 有 “个 性 化 ”设置 外 ， 其 他 设置 都 是 一 行 代码 就 搞定 。 LE 


比 #border-radius-bottom 编译 后 等 效 的 CSS 代码 : 


#border-radius-bottom { 
-moz-border-radius-bottomleft:25px: 
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-webkit-border-bottom-left-radius:25px: 
border-bottom-left-radius:25px: 
-moz-border-radius-bottomright:25px: 
e] -webkit-border-border-bottom-right-radius:25px: 
EF) | border-bottom-right-radius:25px: 


| } 

可 以 看 出 ， 在 普通 CSS 中 一 共 要 写 6 行 代码 ， 而 使 用 Compass 一 行 就 可 以 了 ， 这 个 
| 对比 充分 显示 了 Compass 的 强大 威力 。 
| Compass 目前 一 共 定义 了 近 20 种 常用 的 CSS3 效果 ,读者 可 以 访问 Compass 的 官方 网 
”站 进行 查阅 。 


(643 Utilities 模块 


| 和 Utility 这 个 单词 的 英文 意义 “实用 ”“ 常 用 ”一 样 ， 这 个 模块 该 提供 某 些 不 属于 其 他 
模块 的 功能 。 例 如 ， 常 用 颜色 、 清 除 浮动 或 表格 ，Utility 模块 是 对 开发 中 经 常用 到 的 样式 进 
| 行 封装 。 
使 用 Utility 模块 ， 首 先 要 在 SASS 文件 头 部 引入 : 
| import "compass/utilities/"; 
| Utility 模块 主要 包括 以 下 几 个 分 类 。 
import "compass/utilities/"; 
Links: 常用 链接 样式 。 
Lists: 常用 列表 样式 。 
Text: 文本 样式 的 辅助 方法 。 
Color: 常用 颜色 。 
General: 其 他 常用 样式 。 
Sprites: “图 片 精 灵 ”， 即 对 background-position 的 封装 。 
Tables: 表格 样式 的 辅助 方法 。 

下 面 举 两 个 例子 进行 说 明 。 

链接 在 平时 不 显示 下 划 线 ， 而 在 鼠标 移入 时 显示 下 划 线 ， 这 是 页 面 制 作 中 常见 的 一 种 

sut. 下 划 线 的 显示 由 text-decoration 属性 控制 ， 这 个 属性 既 不 好 记 ， 又 不 好 拼 ， 开 
| 发 者 遇 到 这 个 问题 经 常 不 得 不 借助 搜索 或 字典 ， 而 Compass 中 的 处 理 则 十 分 简单 好 记 : 
| af 
@include hover-link: 
} 
编译 后 的 CSS 代码 : 


a{ 


text-decoration:none: 


ARARRARARAR 


} 

a:hover( 
text-decoration:underline: 

j 
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再 举 一 个 常见 的 需求 : 在 文字 长 度 超出 框 体 时 ， 截 断 文字 并 显示 省 略 号 。 相 信 很 多 开 | 
发 者 都 会 遇 到 这 个 问题 ， 但 设计 时 往往 需要 查询 搜索 引擎 或 者 手册 才能 完成 。 这 里 使 用 | 
Compass 提供 的 ellipsis， 它 是 一 个 包装 好 的 Mixin， 同 样 用 一 行 代码 就 可 以 实现 这 个 需求 。 4 
pí | B 
include ellipsis; | 
P anus 
编译 后 的 CSS 代码 : 
pt 
white-space: nowrap; 
overflow: hidden; 
-ms-text-overflow: ellipsis: 
-o-text-overflow: ellipsis: 
text-overflow: ellipsis; 





} 


对 于 Utility 模块 其 他 功能 , 读者 如 有 需要 , 可 以 在 Compass 官方 网 站 查询 各 个 功能 模 | 
块 的 详细 介绍 。 | 


6.4.4 Helpers 函数 


除了 模块 ，Compass 还 提供 一 系列 函数 。 本 节 介绍 的 几 个 Compass 模块 主要 都 是 应 用 | 
SASS 的 Mixin 特性 ， 对 常用 的 一 些 样式 和 兼容 性 代码 进行 封装 的 模块 。 而 Helpers 则 主要 | 
使 用 了 SASS 的 函数 特性 ， 将 一 些 操作 封装 成 函数 以 提升 开发 效率 。 | 

函数 与 Mixin 的 主要 区 别 是 ， 不 需要 使 用 @include 命令 ， 可 以 直接 调用 。 

Helpers 函数 列表 可 以 在 官方 文档 进行 查询 ， 下 面 会 通过 一 个 典型 的 例子 进行 介绍 。 | 

三 角 函 数 是 Helper 模块 中 的 重要 组 成 部 分 ， 以 读者 熟悉 的 正弦 函数 为 例 ， 在 Compass | 
中 用 sin0 表 示 正 弦 函 数 ， 用 法 如 下 : | 


„test _deg{ 
width: 200px * sin(30deg): 


} 
必 如 果 采 用 角度 制 需要 加 上 deg 作为 单位 ， 如 果 没 有 单位 则 默认 为 弧度 制 */ 
.test{ 


width: 200px * sin(pi()/2): 
} 
必 这 里 的 piO 也 是 Compass 内 置 的 一 个 函数 ， 表 示 a, sin(/2)=1*/ 
转换 为 CSS 以 后 就 是 : 
„test deg{ 
width: 100px 


} 
test { 


width:200px: 
j 


*67* 


| g ~ Dau ht RAGA KA 
R, 


645 Compass 44 


Compass 是 基于 SASS 的 一 个 扩展 库 ， 它 可 以 帮助 开发 者 进一步 简化 和 抽象 代码 ， 并 
提升 代码 的 兼容 性 ， 但 前 提 是 熟悉 Compass 的 各 种 命名 。 

Compass 的 优势 之 一 在 于 可 以 选择 性 地 引入 自己 需要 的 模块 ,其 中 应 用 最 多 的 是 CSS3 
和 Utilities 模块 ， 可 以 有 效 地 缩减 代码 ， 提 高 兼容 性 。 相 对 来 说 ，Layout 模块 则 很 少 得 到 


| 应 用 ， 因 为 开发 者 往往 会 采用 Bootstrap 等 更 丰富 的 框架 来 设置 页 面 的 布局 。 


LESS 也 有 类 似 的 库 可 以 选用 ， 例 如 VeryLess 和 Comless， 但 目前 不 够 成 熟 。 
本 章 总 结 


本 章 通过 分 析 CSS 语言 存在 的 诸多 不 足 ， 如 无 法 设置 变量 、 无 法 进行 计算 、 宛 余 代 码 


| 过 多 、 不易 设置 命名 空间 等 , 介绍 了 CSS 预 处 理 语 言 的 应 用 场景 ， 并 详细 介绍 了 两 种 目前 
| 行业 内 较 流行 和 相对 完善 的 CSS 预 处 理 语言 ，LESS 和 SASS. 


VJ LESS 和 SASS 为 代表 的 CSS 预 处 理 语言 在 语法 及 功能 上 是 非常 相似 的 ， 都 可 以 实 


， 现 变量 、 运 算 、 混 入 Mixin)、 函 数 、 继 承 、 霸 套 等 功能 ， 痢 可 以 简化 CSS 编写 和 维护 的 
， 难度 。 不 过 需要 注意 的 是 ，CSS 预 处 理 语言 最 终 是 需要 编译 成 CSS 来 执行 的 ， 因 此 在 最 终 
| 实现 效果 上 它们 和 CSS 是 完全 相同 的 , 应 用 预 处 理 语言 可 以 让 开发 者 用 更 少 的 代码 做 更 多 
| 的 事情 。 


Compass 则 是 基于 SASS 语言 的 扩展 类 库 ， 封 装 了 开发 中 常用 的 样式 模块 、 函 数 等 ， 


| Compass 的 完善 的 语法 及 强大 功能 也 是 越 来 越 多 的 开发 者 选择 SASS 的 原因 。 
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使 用 Bootstrap 插件 





在 第 5 章 中 讲解 了 Bootstrap 中 的 各 种 组 件 ， 这 只 是 个 开始 。Bootstrap 也 附带 提供 了 
官方 的 jQuery 插件 ， 用 于 扩展 网 站 的 功能 、 丰 富 用 户 体验 。 这 些 插件 可 以 帮助 开发 工程 师 
快速 构建 动态 网 站 。 可 以 使 用 这 些 插 件 并 通过 JavaScript 和 数据 特性 对 他 们 做 进一步 的 定 
制 ， 从 而 开发 出 具有 创造 性 的 网 站 。 本 章 主要 讲解 如 何 使 用 JavaScript 和 jQuery 插件 丰富 
用 户 的 体验 。 插 件 的 使 用 方法 也 是 多 种 多 样 ， 我 们 将 展示 一 些 较为 简单 的 方法 ， 帮 助 大 家 
掌握 这 些 插 件 的 使 用 。 使 用 Bootstrap 的 JavaScript 插件 不 需要 是 JavaScript HF. FKL, 
利用 Bootstrap 大 多 数 插件 无 须 编写 一 行 代 码 ， 只 需 引 入 相应 的 样式 就 可 以 触发 。 





> TÉR Bootstrap 插件 能 做 什么 、 解 决 了 什么 问题 。 
> 掌握 使 用 Bootstrap 插件 的 方法 。 





l. 背诵 英文 单词 
请 在 预习 时 找 出 下 列 单词 在 教材 中 的 用 法 , 了解 它们 的 含义 和 发 音 , 并 填写 于 横 线 处 。 


Collapse with accordion. 


Model. 
Carousel 
p 2 预习 并 回答 以 下 问题 : 
AQ] (0 请 阅读 本 章 内 容 ， 在 作业 本 上 完成 以 下 简 答题 
(1 Bos M ERAS 
| (2) Bootstrap 插件 如 何 应 用 ? 


7.1 概 述 


Bootstrap 提供 了 13 个 基于 jQuery 类 库 的 插件 ， 包 括 模 态 窗口 (Modals)、 深 动 监控 
| 《〈Scrollspy)、 标 签 效果 (Tabs), ERAR (Tooltip), “WE” AUR (popovers)、 警 告 区 
| 域 (Alerts), FBR (Collapse). WEAF (carousel). HiAPEAS (typeahead) 等 。 下 
， 面 读者 将 深入 学 习 Modals 等 插件 在 Bootstrap 中 所 有 涉及 交互 动 效 的 插件 都 是 通用 jQuery 
插件 来 完成 的 。 
通常 , 最 好 先 检查 确认 DOM 已 经 就 绪 ， 然 后 再 执行 JavaScript 调用 语句 。 在 DOM 就 
绪 前 执行 JavaScript 调用 ， 浏 览 器 可 能 还 没有 准备 好 要 操作 的 元 素 。 使 用 jQuery， 先 选择 
文档 (或 整个 页 面 的 内 容 )， 然 后 调用 .ready0 方 法 即 可 : 
$(document).ready(functionO{ 
alert( 页 面 加 载 完成 ): 
/页 面 加 载 完成 后 ， 会 弹出 警告 杠 
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WBE (Transition) 可 以 实现 简单 的 过 渡 效 果 ， 例 如 以 下 几 种 效果 。 
模 态 对 话 框 的 滑 入 / 滑 出 和 淡 入 /淡出 。 

标签 页 淡出 。 

警告 框 淡出 。 

滑 入 / 滑 出 旋转 面板 。 


ARARA 


7.3 模 态 对 话 框 


| 模 态 对 话 框 (Modal) 用 于 展示 附加 的 信息 或 提供 需要 用 户 交 互 的 内 容 ， 让 用 户 可 以 
， 完 成 交互 又 不 离开 当前 窗口 。 想 让 用 户 在 当前 页 面 完成 某 种 稍 显 复杂 的 操作 ， 例 如 登录 、 
| 注册 ， 或 者 是 阅读 用 户 说 明 ， 模 态 对 话 框 是 一 个 不 错 的 选择 ， 如 图 7.1 所 示 。 用 户 在 操作 
， 或 阅读 完毕 后 可 以 很 方便 地 返回 原 页 面 ， 免 去 了 页 面 跳 转 带 来 的 等 待 。 
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SE | 
机 这 对 活 框 示例 | 
mea 
图 7.1 模 态 对 话 杠 | 
构造 模 态 对 话 框 的 代码 如 下 : 
«button class-"btnbtn-primary btn-lg" data-togele="modal" data-target="#myModal"> 
点 击 触发 模 态 框 
</button> 
<!-- Modal -> 
<div class-"modal" id="myModal"> 


<div class="modal-dialog"> 
<div class="modal-content"> 
<div class="modal-header"> 
<button type="button" class-"close" data-dismiss="modal">&times:</button> 


<h4 class-"modal-title" id="myModalLabel"> 对 话 框 标 题 </h4> 
</div> 
<div class="modal-body"> 
模 态 对 话 框 示例 
</div> 
<div class="modal-footer"> 
<button type="button" class-"btnbtn-default" data-dismiss="modal"> 关 闭 </button> 
<button type="button" class="btnbtn-primary"> 保 存 </button> 
</div> 
</div><!-- /.modal-content --> 
</div><!-- /.modal-dialog --> 
</div><!-- /modal --> | 
根据 代码 分 析 ， 完 整 的 模 态 对 话 框 主要 分 为 两 个 部 分 : 触发 按钮 和 对 话 框 。 触 发 按钮 | 


可 以 是 一 个 button， 也 可 以 是 一 个 链接 。 


7.3.1 用 法 


构造 模 态 对 话 框 ， 只 需要 加 入 两 个 元 素 : 

回 data-toggle="modal" 触 发 器 。 

加 ”data-target=#myModal， 用 于 和 相应 的 对 话 框 id 进行 对 应 。 
要 通过 jQuery 调用 id="#myModal" 的 模 态 框 ， 也 仅 需 一 行 代码 : 


$(‘#myModal’).modal(options) 
7.3.2 ”对 话 框 结构 
构造 模 态 对 话 框 分 主要 分 3 层 结构 。 
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第 一 层 : <div class="modal" id="myModal">…</div>， 使 用 class="modal" 设 置 样式 并 
设置 模 态 对 话 框 的 触发 类 ， 提供 id 和 触发 按钮 的 data-target 属性 的 值 进行 对 应 ， 还 可 以 添 
加 其 他 的 配置 属性 。 


第 二 层 : «div class="modal-dialog">…</div>， 设 置 一 个 居中 的 对 话 框 。 


第 三 层 : <div class="modal-content">…</div>， 设 置 具 体 的 内 容 。 之 后 , 定义 了 modal- 
header、modal-body、modal-footer， 在 其 中 放 入 了 相关 的 内 容 。 也 对 按钮 使 用 了 情景 颜色 ， 
它 看 起 来 更 符合 实际 的 用 途 。 


(REG 不 要 在 一 个 模 态 杠 上 重合 另 一 个 模 态 框 。 


开发 中 ， 选 项 参数 可 以 通过 data 属性 或 JavaScript 进行 传递 。 对 于 data 属性 ， 需 要 将 


| 选项 名 称 放 到 data- 之 后 ， 例 如 data-backdrop=""， 具 体 参 数 可 以 参考 官方 文档 。 


7.4 标签 页 切换 


| 标签 页 (Tab) 导航 ， 也 叫 选项 卡 切换 。 相 信 读 者 已 经 习惯 很 多 网 站 上 的 可 切换 的 标 
| 签 导航 。 通 过 组 合 一 些 内 容 属 性 ，Bootstrap 让 开发 者 轻松 创建 标签 页 式 界面 。 例 如 ， 有 多 
个 分 类 的 内 容 ， 又 不 想 全 部 直接 展现 在 页 面 上 ， 使 用 标签 页 进行 切换 是 一 个 不 错 的 选择 ， 

| 如 图 7.2 所 示 。 


欢迎 来 到 Bootstrap 3 的 jQuery 插件 测试 





图 7.2 标签 页 切换 
图 7.2 标签 页 切换 的 代码 如 下 : 


<ul class="navnav-tabs"> 


<li class="active"><a href="#home" data-toggle="tab"> 首 页 </a></li> 
<li><a href="#profile" data-toggle="tab"> 概 述 </a></li> 

<li><a href+"#messages" data-toggle="tab"> 信 息 </a></li> 

<li><a href+"#settings" data-toggle="tab"> 设 置 </a></li> 


<h> 
<!-- Tab panes --> 
<div class="tab-content"> 


<div class="tab-pane active" id="home"> 
<h3> 欢 迎 来 到 Bootstrap 3 的 jQuery 插件 测试 </h3> 

</div> 
<div class="tab-pane" id="profile"> 

<p> 这 里 用 于 提供 Bootstrap 3 的 jQuery 插件 的 测试 用 例 ， 并 提供 讲解 <p> 
</div> 
<div class="tab-pane" id="messages">{3 </div> 
<div class="tab-pane" id="settings">i Ei </div> 


</div> 
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7.4.1 标签 页 用 法 


标签 页 切换 由 两 部 分 组 成 : 标签 页 部 分 和 与 标签 页 对 应 的 内 容 部 分 。 | 
标签 页 部 分 本 质 是 一 个 列表 ， 为 列表 的 ul/ol 属性 添加 .nav 和 .nav-tabs 类 ， 使 其 展现 为 ， & 
标签 页 的 样式 ， 列 表 项 中 的 <a> 链 接 需 要 加 上 data-toggle="tab" 这 个 触发 器 ， 并 且 href 的 值 | 
要 和 对 应 内 容 部 分 的 过 进行 对 应 。 
内 容 部 分 需要 包 庄 在 <div class="tab-content">…</div> 内 部 , 保证 除了 应 该 显示 的 内 容 
外 ， 其 他 是 隐藏 的 。 内 容 的 各 个 单项 需要 包 庄 在 <div class="tab-pane">…</div> 内 部 ， 并 且 | 
要 为 <div class="tab-pane"> 标 签 设置 一 个 id， 用 于 与 标签 页 的 href 属性 值 对 应 。 


7.4.2 用 jQuery 实现 标签 页 切换 | 
除了 上 面 使 用 data-toggle="tab" 启 用 标签 页 之 外 ，Bootstrap 也 允许 开发 者 直接 使 用 | 
jQuery 实现 同样 的 功能 。 以 下 是 通过 JavaScript 激活 标签 页 的 代码 : | 


$(‘#myTab a’).click(function (e) f 
e.preventDefault(): 
$(this).tab(‘show’): 





» 
以 下 是 切换 到 个 别 标签 页 的 不 同方 式 : 
S$(#myTab a[href="#profile"]).tab('show’); /| 按照 名 称 选择 标签 页 


$('#myTab a:first’).tab(‘show’); // 选 择 第 一 个 标签 页 
$C#myTab a:last').tab('show'): // 选 择 最 后 一 个 标签 页 
$(#myTabli:eq(2) a’).tab(‘show’); // 选 择 第 三 个 标签 页 〈 索 引 0 为 第 一 个 ) 


75 工具 提示 条 


工具 提示 条 (Tooltip) 可 以 用 来 给 出 图 标 、 链 接 或 按钮 的 信息 说 明 , 或 (与 标签 连用 ) | 
给 出 缩写 词 的 全 称 以 及 需要 附加 的 提示 ， 鼠 标 悬 停 在 元 素 | 
上 时 出 现 这 些 提 示 。 只 要 鼠标 悬 停 在 元 素 之 上 ， 它 就 会 显 
示 在 代码 中 已 经 定义 好 的 相关 信息 ， 帮 助 网 站 的 用 户 了 解 
这 些 选 项 或 链接 的 用 途 ， 如 图 7.3 所 示 。 图 7.3 ”鼠标 悬 停 时 的 提示 
示例 代码 如 下 : | 
<a href="#" data-toggle="tooltip" data-placement="right" title=" 在 右 侧 显 示 提示 内 容 "”class="btnbtn- | 
primary"> 工 具 提示 </a> | 


7.5.1 用 法 


其 中 data-toggle="tooltip" 是 插件 触发 器 ，title 是 内 容 提示 文字 ，data-placement 属性 用 
于 指定 提示 出 现 的 位 置 。 | 
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752 用 js 使 标签 页 生效 


| 户 。 工 具 提示 条 (Tooltip) 采用 的 是 hover 
”进行 触发 ， 多 用 于 简单 的 提示 ， 弹 出 框 则 
| 通过 点 击 触发 ,一 般 用 于 显示 更 多 的 内 容 ， 


要 使 该 插件 生效 ， 需 要 在 页 面 底部 添加 JavaScript 代码 完成 初始 化 : 
$(.bn’).tooltip(: 
开发 者 可 以 为 tooltip0 函 数 添加 参数 ， 或 者 在 标签 内 添加 “data- 参 数 名 ”进行 配置 ， 


如 上 面 例子 中 的 data-placement="right"。 
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弹出 框 与 工具 提示 条 非常 相似 ， 可 以 同时 显示 标题 及 详细 信息 ， 用 来 提示 或 者 警告 用 


弹出 框 的 应 用 


采 肌 了 点 击 事件 能 发， 相 比 Toop 可 以 
显示 更 多、 更 正式 的 内 容 ， 并 且 可 以 本 
EES Hit. 





如 图 7.4 所 示 。 


应 用 弹出 框 插件 的 代码 结构 和 Tooltip 图 7.4 弹出 框 插件 
差不多 ， 图 7.4 的 实现 代码 如 下 : 
<a href="javascript:void(0):" class="btn btn-lg btn-danger" data-toggle="popover" title="" data-content-" 


采用 了 点 击 事件 触发 , HILL Tooltip 可 以 显示 更 多 、 更 正式 的 内 容 , 并 且 可 以 配置 更 多 样式 。"data-original- 
| ile WHERE T EE... 


</a> 


| 7.6.1 用 法 


需要 添加 data-toggle="popover" 触 发 器 进行 触发 ， 主 要 有 两 个 配置 项 :data-content Ac 


| 置 弹出 框 的 内 容 ，data-original-title 配置 弹出 框 的 标题 。 
7.6.2 用 js 使 弹出 框 生效 


弹出 框 对 Tooltip 存在 依赖 ， 因 此 插件 中 必须 包含 Tooltip。 和 Tooltip 一 样 ， 也 需要 添 


| 加 初始 化 JavaScript 代码 : 


$(.btn-danger").popover(): 
和 Tooltip 一 样 ， 可 以 为 popover0 函 数 添加 参数 ， 或 者 在 标签 内 添加 “data- 参 数 名 ” 


进行 配置 ， 如 上 面 Tooltip 例子 中 的 data-placement-"right". 


7.7 提示 信息 


提示 信息 (Alert) 也 叫 警告 框 ， 一 般 来 说 ， 任 务 执行 成 功 或 失败 后 ， 用 户 需要 得 到 一 


| 个 提示 信息 ， 这 个 信息 可 以 出 现在 页 面 跳 转 后 的 新 页 面 ， 也 可 以 是 AJAX 执行 成 功 后 的 回 
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cd | 


调 。 但 它们 都 有 一 个 共同 的 特点 : 需要 在 阅读 完毕 后 消失 。Bootstrap 内 置 了 警告 框 插件 ， 
使 用 户 可 以 单 击 关闭 按钮 关 掉 提示 信息 ， 如 图 7.5 所 示 。 


ES, R5887! | f 
EN 
图 7.5 提示 信息 i 
示例 代码 如 下 : | 
<div class-"alert alert-danger fade in 警告 ， 服 务 器 挂 了 ! | 


<a class-"close" data-dismiss-"alert" href="#">X</a> 
</div> 


7.7.1 用 法 


构造 提示 信息 需要 两 个 部 分 : 提示 信息 和 关闭 信息 按钮 。 提 示 信 息 这 里 使 用 了 Bootstrap | 
内 置 的 alert 类 , 关闭 按钮 则 是 在 和 提示 信息 文字 并 列 的 位 置 构造 一 个 链接 , 为 该 链接 添加 | 
data-dismiss="alert" 这 个 触发 器 触发 关闭 事件 。 | 


7.7.2 选项 


Bootstrap 为 警告 的 关闭 动作 设置 默认 的 事件 ,允许 进行 监听 , 可 以 再 编写 关闭 警告 框 | 

后 执行 的 动作 。 | 

M close.bsalert: 当 close 函数 被 调用 之 后 ， 此 事件 被 立即 触发 。 | 

M Closed.bs.alert: 当 警 告 框 被 关闭 之 后 (CSS 过渡 效果 执行 完毕 ) ， 此 事件 被 触发 。 | 

示例 代码 如 下 : | 
$C"#my-alert").bindC'closed.bs.alert,functionO{// 执 行动 作 的 代码 ) 














7.8 按 4a 


按钮 (Button) 插件 为 网 页 添加 一 些 交互 状态 或 者 为 其 他 组 件 创建 按钮 组 。 一 般 情况 | 
下 ， 按 钮 用 于 完成 动作 的 触发 或 页 面 的 跳 转 ， 除 此 之 外 ，Bootstrap 还 通过 jQuery 插件 对 | 
按钮 的 功能 进行 了 一 些 扩展 ， 如 按钮 的 状态 设置 、 模 拟 checkbox, radio 效果 的 按钮 组 等 。 | 


7.8.1 按钮 的 Loading 状态 
按钮 的 Loading 状态 ， 一 般 用 于 需要 响应 AJAX 请 求 的 


场景 , 防止 多 次 单 击 ， 通 过 添加 data-Ioading-text-"Loading---", 
并 且 编 写 JavaScript 代码 绑 定 事件 来 实现 ， 如 图 7.6 所 示 。 7.6 按钮 的 Loading 状态 
图 7.6 的 代码 如 下 : 


«button type="button" id="fat-btn" data-loading-text-"loading" class="btnbtn-primary"> 提 交 </button> 
<button type="button" id="loading-example-bin" data-loading-text="Loading..." class-"btnbtn-primary" | 
提交 </button> i 
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<script> 
$('#loading-example-btn').click(function () { 
varbtn = $(this) 
btn.button(‘loading’) 
J: 


</script> 


782 按钮 组 的 状态 设置 





| Bootstrap 支持 按钮 组 的 选中 状态 设置 ， 类 似 于 复 选 / 单 选 表单 。 首 先 来 看 一 个 未 经 任 
| 何 设置 的 按钮 组 ， 如 图 7.7 所 示 。 
图 7.7 的 代码 如 下 : 
<div class="btn-group"> 
<button type="button" class="btnbtn-default"> 左 转弯 </button> 
<button type="button" class="btnbtn-default"> 直 行 </button> 


<button type="button" class="btnbtn-default"> 右 转弯 </button> 
</div> 


| 如 果 要 让 按钮 的 状态 可 以 保持 ,需要 为 外 层 的 <div> 添 加 属性 data-toggle="button", Jf 
| 在 每 一 个 按钮 内 部 添加 单 选 / 复 选 表单 ， 例 如 


| «div class="btn-group"data-toggle="button"> 
| «button type="button" class="btnbtn-default"> 
| <input type="checkbox"> 左 转弯 
</button> 
«button type="button" class="bmbtn-default"> 
<input type="checkbox"> 直 行 </button> 
«button type="button" class="btnbtn-default"> 
<input type="checkbox"> 右 转弯 </button> 








</div> 
代码 生成 效果 如 图 7.8 所 示 。 
ARS 直行 
左 转弯 ”直行 du 左 转弯 | OKT onte 
图 7.7 未 经 任何 设置 的 按钮 组 图 7.8 让 按钮 的 状态 可 以 保持 
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| 折合 《Collapsible》 用 于 内 容 的 展开 / 收 起 ， 其 功能 同 标签 页 类 似 ， 两 者 展开 方向 是 一 
， 样 的 ， 都 是 向 下 展开 内 容 ， 但 是 标签 页 的 标题 项 是 左右 排列 ， 而 折 全 《俗称 手风琴 效果 ) 
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COPEL FHC. TATARSTAN IRA AR, TRER RANEI | 
一 个 。 折 局 效果 如 图 7.9 所 示 。 | 


Collapsible Group Item #1 





Anim pariatur cliche reprehenderit, enim eiusmod high life 


accusamus terry richardson ad squid. 3 wolf moon officia aute, non | 

cupidatat skateboard dolor brunch. Food truck quinoa nesciunt 
laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a 

bird on it squid single-origin coffee nulla assumenda shoreditch et 
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred 
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice 
lomo. Leggings occaecat craft beer farm-to-table, raw denim 
aesthetic synth nesciunt you probably haven't heard of them 
accusamus labore sustainable VHS 


Collapsible Group Item #2 


Collapsible Group Item #3 


图 7.9 HÈ | 
7.9.1 用 法 


如 果 只 是 构建 单个 元 素 的 展开 收 起 ， 那 么 结构 非常 简单 : | 


<button class="btnbtn-default" data-toggle="collapse" data-target="#demo"> | 
EIE 1371 | 
</a> 

«div id="collapseOne" class="panel-collapse collapse in">4f# 4 #</div> 


只 需要 为 标题 容器 添加 data-toggle="collapse" 触 发 器 , 并 将 data-target MH MIA A | 
容器 的 id 进行 对 应 即 可 。 
如 果 要 构造 如 图 7.9 RMB, WARM: 


<div class="panel-group" id="accordion"> 
<div class="panel panel-default"> 
<div class="panel-heading"> | 
<h4 class="panel-title"> | 
<a data-toggle="collapse" data-toggle-"collapse" data-parent="#accordion" href}="#collapseOne"> | 
HARER | 
</a> | 
«I4» | 
</div> 
«div id-"collapseOne" class="panel-collapse collapse in" | 
<div class="panel-body"> | 
折叠 内 容 部 分 
</div> 
</div> 
</div> 


</div> 
HAH cms BE — Mi BAA <div class="panel-group">…</div>， 所 有 内 容 都 要 
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EL] | 组 里 的 每 一 个 项 目 实 质 上 是 一 个 面板 ,面板 的 结构 在 前 面 介绍 过 .不 同 点 在 于 paneLbody 
(面板 内 容 ) ZAR 7E<div id="collapseOne" class="panel-collapse collapsein">…</div> 内 
| 部 。Panel-heading (面板 的 标题 部 分 ) 中 要 将 标题 文字 放 在 链接 <a data-toggle-"collapse" 
| data-parent="#accordion"href="#collapseOne">…</a> 内 部 。 该 链接 必须 要 有 data-toggle= 
| "collapse" 这 个 触发 器 , data-parent-" accordion" A FAIH ÆA id 进行 对 应 , href="#collapseOne" 
”用 于 和 面板 内 容 外 层 div 元 素 的 id 对 应 。 


7.10 幻 灯 K 


| 幻灯 片 (Carousel) 插件 也 称 轮 播 ， 是 一 种 便捷 高 效 向 网 页 添加 滑 块 展示 效果 的 方式 。 
| Bootstrap 集成 了 一 个 幻灯 片 组 件 ， 可 以 完成 图 片 或 内 容 的 切换 和 自动 播放 ， 如 图 7.10 所 示 。 





图 7.10 幻灯 片 


| 图 片 的 幻灯 片 页 面 结构 由 3 部 分 组 成 : 控制 器 、 内 容 部 分 、 标 示 符 。 控 制 器 负责 控制 
,幻灯 片 的 翻 页 ， 标 示 符 标示 页 码 ， 内 容 部 分 负责 展现 内 容 。 具 体 代码 如 下 : 
| <div id="carousel-example"class="carousel slide" data-ride="carousel"> 
<! 一 标示 符 --> 
<ul class="carousel-indicators"> 
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
<li data-target="#carousel-example-generic" data-slide-to="1"></li> 
<li data-target="##carousel-example-generic" data-slide-to="2"></li> 
<ul> 
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<div class="carousel-inner"> 


<! 一 控制 器 --> 
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> 
<span class="glyphiconglyphicon-chevron-left"></span> 
</a> 
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> 
<span class="glyphiconglyphicon-chevron-right"></span> 


<div> 
7.10.1 用 法 


首先 ， 所 有 内 容 都 需要 包 衷 在 <div class="carousel slide">…</div> 内 部 ， 如 果 需 要 开启 | 
轮 播 ， 则 需要 加 入 data-ride="carouse" 触 发 器 。 | 

标示 符 部 分 是 一 个 列表 , 需要 为 ol/ul 项 添加 .carousel-control 类 , 并 添加 一 个 .left BK right | 
类 指明 向 前 翻 页 还 是 向 后 翻 页 。 翻 页 的 图 标 可 以 使 用 Bootstrap 内 置 的 图 标 : | 


<span class="glyphiconglyphicon-chevron-left"></span> 
<span class="glyphiconglyphicon-chevron-right"></span> 


也 可 以 是 自 定 义 图 标的 样式 。 


注意 ; Bootstrap 的 幻灯 片 插件 是 基于 CSS3 实现 的 动画 效果 ， 但 是 IE9 及 IE9 以 下 的 浏览 | 
器 不 支持 这 些 必要 的 CSS Bi, ALE 下 会 丢失 过 滤 动画 效果 . | 


和 其 他 插件 的 参数 配置 一 样 , 可 以 通过 data 属性 或 JavaScript 传递 选项 参数 对 于 data | 
属性 ， 将 选项 名 称 放 到 data- 之 后 ， 例 如 data-inteval="". | 
7.10.2 选项 


(1) 以 可 选 的 选项 对 象 初始 化 并 启动 传送 带 : 
$(‘.carousel’).carousel({ 
interval: 2000 
» 


(2) 从 左 到 右 轮 播 传送 带 中 的 项 : 
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-carousel('cycle") 


G) 暂停 传送 带 的 轮 播 : 
-carousel('pause") 


EL domes. 


类 似 数组 ， 基 于 0 计数 : 


| .carousel(‘number’) 
| (5) 切换 : 


.Carousel('prev') 切换 到 前 一 项 
-carousel('next) 切换 到 后 一 项 


本 章 总 结 


| 本 章 介绍 了 9 种 最 常用 的 Boostrap 插件 , 项 目 中 应 用 Boostrap 插件 能 大 大 提高 前 端 开 
| 发 的 效率 ， 使 前 端 开 发 从 原始 的 刀 耕 火种 的 时 代 ， 步 入 到 工业 文明 时 代 。 用 Boostrap 可 以 
| 实现 任何 符合 行业 需求 的 项 目 。 


本 章 作业 


1. 实现 如 图 7.11 所 示 的 幻灯 片 切换 效果 。 
2. 实现 如 图 7.12 所 示 的 效果 。 


What We Do 


Why Choose Us? 





图 7.11 幻灯 片 切 换 图 7.12 HARY 
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定制 及 优化 Bootstrap 





本 章 主 要 介绍 对 Bootstrap 的 定制 方法 ， 通 过 实践 的 方式 ， 在 项 目 中 包含 Bootstrap 并 
实现 简单 的 定制 , 也 详细 讲述 需要 编译 LESS 的 深度 定制 的 方法 。 Bootstrap 的 CSS 源 代码 
是 用 LESS 编写 的 ， 使 用 了 一 些 变量 和 Mixin， 使 得 开发 者 可 以 轻松 地 实现 定制 。 


| 本 章 工作 任务 


如 何 对 Bootstrap 进行 个 性 化 定制 。 





> 了 解 Bootstrap 的 两 种 定制 化 途径 。 
> 掌握 在 官网 进行 Bootstrap 定制 的 方法 。 
> 掌握 修改 源 代码 定制 Bootstrap 的 方法 。 


8.1 在 官方 网 站 进行 Bootstrap 定制 


首先 进入 http://v3.bootcss.com 网 站 ， 单 击 定制 选项 ， 进 入 Bootstrap 的 定制 页 面 ， 如 
图 8.1 所 示 。 

向 下 滚动 页 面 ， 首 先 会 发 现 CSS 组 件 的 部 分 ， 如 图 8.2 所 示 。 在 这 里 ， 可 以 只 选择 需 
要 的 组 件 下 载 ， 避 免 整体 使 用 Bootstrap 造成 的 CSS 文件 过 大 的 问题 。 

继续 向 下 滚动 页 面 ， 如 图 8.3 所 示 ， 这 是 定制 jQuery 组 件 的 部 分 。 在 项 目 实战 开发 当 
中 ， 并 不 需要 使 用 所 有 的 效果 ， 在 这 里 选择 需要 的 组 件 即 可 。 如 果 喜 欢 其 中 的 JS 效果 ， 














p Lt R00 


也 可 以 在 这 里 直接 下 载 对 应 的 jQuery 插件 。 


Bootstrap 


件 ， 定制 一 份 








图 8.1 中 文官 网 定制 页 面 


MISSUS Less 文件 编译 到 你 自己 的 定制 Bootstrap 版 本 中 。 不 确定 每 个 文件 的 月 途 四 ? 请 先 通读 
此 文档 中 的 全 局 CSS 样式 和 组 件 章节 - 


通用 CSS 组 件 JavaScript 播 件 


% Print media styies @ Gyphcons @ Component animations (for 
38) 

% Typography Button groups 

@ Dropdowns 
% Code Input groups 

æ Toorips 
Gnd system Nave 

& Popovers 
Tapes @ Navoar 

& Modals 
D Forms @ Breaacrumbs 

@ Carousel 
& Butions & Pagination 


& Responsive uliities Pager 


@ Labels 
& Badges 


% Jumbotron 


图 8.2 CSS 组 件 定制 


jQuery 插件 mm 


选择 将 那些 jQuery 插件 包 合 到 你 的 定制 版 本 中 不 确定 他 们 的 用 途 吗 ? 请 通读 此 文档 中 的 JevaScnpt 持 件 章节 , 





Linked to components Magic 

国 Alert dismissal EE 

@ Advanced butions 9 Collapse 

@ Carousel functionality 4 Scolspy 

E Dropdowns & Transtions irequrad for any bind of animator) 
modas 

m Toottps 


i Popovers requires molips) 


& Tooglable tabs 








图 8.3 jQuery 组 件 定制 
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最 后 就 是 全 局 变量 的 设置 ， 如 图 8.4 所 示 。 在 这 里 ， 可 以 对 Bootstrap RRRA 
整 ， 获 得 想 要 的 配色 效果 ， 还 可 以 制作 个 性 化 的 Bootstrap 皮肤 。 | 





Less 变量 


通过 Less 变量 可 以 自 定 义 颜色 、 尺 寸 等 ， 最 终 将 会 反映 到 你 所 下 载 的 CSS HREH, 


Colors 


Gray and brand colors for use across Bootstrap. 
@gray-base @gray-darker Ggray-derk 

#000 lighten(@gray-base, 13.5) lighten(@gray-base, 20%) 
@gray @gray-light @gray-ignter 

lighten(@gray-base, 33.53) lighten(@gray-base, 45.7%) lighten(@gray-base, 93.5%) 
@brand primary @brand-success @brand-into 

#428bca 5cb85c #5bcade 


Qhranc-werning @brand-danger 


#foadse #dos3af 





图 8.4 全 局 变量 设置 | 
根据 个 人 的 要 求 定制 完成 后 ， 单 击 页 面 最 下 面 的 “下 载 ” 按 钮 即 可 完成 定制 。 | 
官方 网 站 提供 的 定制 化 从 使 用 角度 来 说 还 是 很 方便 的 , 但 是 要 求 必须 对 定制 方案 胸 有 | 

成 竹 ， 因 为 网 站 无 法 保存 之 前 的 定制 化 信息 ， 定 制 化 下 载 后 发 现 有 些 地 方 需要 修改 ， 就 必 | 
须 重复 上 面 的 过 程 ， 这 无 疑 是 非常 麻烦 的 。 | 


8.2 修改 源 代码 定制 Bootstrap 


首先 需要 做 一 些 准备 工作 ， 由 于 Bootstrap 使 用 了 Grunt 作为 自动 化 打包 测试 工具 , 而 | 
Grunt 是 依赖 于 Node.js 的 ， 所 以 需要 先 在 电脑 上 安装 Nodejs。 | 
CD 在 中 文官 方 下 载 页 面 ， 单 击 中 间 的 “下 载 源码 ”按钮 ， 下 载 源 代 码 ， 如 图 85 | 
所 示 。 | 





Bootstrap ( 当前 版 本 v3.3.0 ) 得 供 以 下 几 种 方式 攻 你 快速 上 手 , i8—R E XCEOHR ECHTE BESS RNA EAE 
HSE, BRORTENAS ， 看 看 哪 种 方式 适合 你 的 需求 吧 。 





Bootstrap 源码 Sass 
Bootstrap Less. JavaScript 和 FETAN, 3 过 全 Bootstrap M Less 到 Sass PAESE 
并 向 的 CSS，Javasapt 生体。 SPAR SE Loss ase SAS EGE Ralls, Compass 
Re, FIARE. mI. EL Sass 的 项 目 中 引入 


| 下 载 Bootstrap | 下 载 源码 | 下 载 Sass 项目 





8.5 less 源码 下 载 页 面 
(2) 下 载 完成 后 解压 ， 解 压 后 的 文件 夹 如 图 8.6 所 示 。 
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test-infra 


|Boatmmgmt sg » 


sedtorcon gru ignore redegi | conigym | bowerjso CNAM 
fig es 


sage sa 


composer. CONTRIB  Gruntfiejs a packagejs bee. 


json — UTING.md on 





图 8.6 解压 后 的 文件 夹 


HH, less 文件 夹 中 包含 了 Bootstrap 中 所 有 样式 组 件 的 less 源 代 码 ，js 文件 夹 中 包含 
了 所 有 的 jQuery 插件 , fonts 文件 夹 用 于 保存 字体 文件 , dist 文件 夹 用 于 保存 编译 后 的 CSS、 


JavaScript 和 字体 文件 。 
(3) 需要 在 命令 行 中 进入 该 文件 来， 执行 命令 : 
Npm install 


该 命令 用 于 安装 自动 化 管理 的 Bootstrap 的 Grunt 插件 ， 安 装 完成 后 会 生成 
node modules 文件 夹 ， 所 有 需要 的 Node.js 插件 都 安装 在 这 里 。 


注意 : 由 于 默认 的 安装 源 服务 器 在 国外 ， 可 能 由 于 网 络 原因 安装 失败 ,可 以 在 命令 行 中 使 用 
npm config set registry http://registry.cnpmjs.org 这 个 命令 ， 将 下 载 源 改 为 国内 。 


(4) 要 完成 CSS 的 定制 化 ， 需 要 进入 less 文件 夹 ， 如 图 8.7 所 示 ， 修 改 variables.less 
和 bootstrap.less 文件 。 其 中 variables.less 是 全 局 变量 的 配置 文件 ，bootstrap .less 是 加 载 项 的 配 
置 文件 。 


J jf ff A A 


mixins ^ -csscombj .csslintre alertsless  badgesle bootstrap. breadcru button-gr — buttonsle 
son ss less mbsless — oupsless ss 


carouselle closeless codeless componen dropdown formsless glyphicons gridless — input-grou 
ss tanimatio sess Jess psless 
nsless 


m E m I pm 全 E m E 
P p | p 和 $i I $i +a] 


jumbotron labelsless list-group. medialess mbinsless modalsles navbarles navsless normalize. 
Jess less s s less 


pagerless pagination panelsles popovers! printless progress-  responsiv responsiv scaffoldin 
Jess 5 ess barsless  e-embedi e-utilties! gless 


Jp Bg 


tablesless themeless thumbnail tooltples ^ typeless utilitiesles — variables.l wkl 








8.7 less 文件 夹 中 的 组 件 
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(5) 打开 bootstrap.less 文件 ， 可 以 看 到 如 图 8.8 所 示 的 结构 。 一 般 来 说 ， 可 以 配置 组 ， 
件 部 分 ， 也 就 是 图 中 的 注释 “//Components” 后 面 的 代码 ， 将 其 中 一 些 用 不 到 的 注释 去 掉 。 | 
而 对 于 核心 组 件 ， 建 议 保留 原貌 。 


Core variables 
2 ginport “variabli 





is inport " 


14 Gimport " 
is Gimport * 

Ginport * 
17 Gimport " 


图 8.8 bootstrap.less 文件 | 
(6) 如 果 只 是 想 单独 使 用 某 个 组 件 ， 需 要 将 js 文件 夹 中 对 应 的 组 件 应 用 到 项 目 中 即 | 


可 。 如 果 需 要 应 用 多 个 组 件 ， 并 将 其 打包 处 理 ， 则 通过 修改 如 图 8.9 所 示 的 Gruntfile.js Rd | 
置 文件 ， 移 除 那些 用 不 上 的 JavaScript 插件 ， 或 者 添加 新 的 插件 。 





S + module.exports = function (grunt) ( 


Fo 
grunt.util.l 


Regino. quote = 


Ce 


Metadata 
Pkg: grunt. fite.read3SON(package.js0n"), 
banner: '/#i\n' + 

1 Bootstrap vee phg.version X) (<i pkg.honepage Wn + 





89 Gruntfile.js 配置 文件 H 
CD 自 定义 完成 后 ， 只 要 在 命令 行 执行 grunt dist 命令 , 就 可 以 自动 将 文件 打包 到 dist i 
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| 文件 夹 中 ， 同 时 生成 开发 版 本 和 应 用 于 生产 环境 的 最 小 化 版 本 。 
| 除了 用 于 打包 的 grunt dist 命令 外 ， 还 有 几 个 常用 的 命令 可 能 会 用 到 。 
回 Grunt: 运行 所 有 的 测试 用 例 并 且 编 译 CSS 文件 到 dist 目录 。 


GV | E Gates. 只 运用 测试 用 例 。 
| M Grunt watch: Hits LESS 文件 修改 的 命令 ， 当 该 命令 运行 时 ， 只 要 修改 LESS X 
件 ， 就 会 自动 地 调用 编译 命令 生成 最 新 的 csslis 文件 。 


| 总 的 来 说 ， 两 种 定制 化 各 有 优势 ， 直 接 在 官网 定制 适合 少量 的 、 明 确 的 修改 ， 简 单方 
| 便 。 如 果 需 要 深度 定制 ， 下 载 源 代码 修 改 配置 的 方式 则 更 为 可 取 。 


8.3 #4 Bootstrap 资源 


| Bootstrap 在 整体 式 的 前 端 框 架 中 算是 比较 早出 现 的 , 很 多 后 进 者 在 某 些 特性 上 可 以 说 
| 已 经 超越 了 Bootstrap， 如 更 小 巧 的 Pure、 对 移动 设置 更 友好 的 Foundation， 以 及 一 些 对 浏 
| 览 器 兼容 更 好 的 国内 框架 。 
| Bootstrap 仍然 受到 开发 者 青睐 的 原因 不 仅仅 是 它 自身 优秀 ， 还 在 于 开源 社区 基于 
| Bootstrap 开发 出 的 一 系列 插件 、 皮 肤 、 模 板 ， 这 已 经 形成 了 良好 的 生态 系统 。 如 果 不 喜 欢 
| Bootstrap 的 配色 和 样式 ， 那 么 有 成 百 上 千 的 皮肤 可 供 选择 ;如果 觉得 官方 的 JavaScript 插 
| 件 不 够 丰富 ， 百 度 Cbaidu.com) 或 必 应 (bing.com) 搜 一 下 ， 各 种 基于 Bootstrap 的 插件 可 
” 供 选 择 ， 如 果实 在 懒得 下 工夫 ， 整 体 的 Bootstrap 风格 网 站 源 代码 拿 来 直接 部 署 就 可 以 。 
这 里 为 读者 介绍 一 些 Bootstrap 相关 资源 。 
E] Boobstrap 中 文 网 : 地 址 是 http://www.bootess.com， 如 图 8.10 所 示 , 不 仅 有 Bootstrap 
官方 文档 的 中 文 翻译 , 还 提供 了 很 多 相关 资源 的 链接 , 以 及 常用 的 前 端 资源 的 CDN。 


Bootstrap 


简洁 、 直 观 、 强 悍 的 前 端 开发 框架 ,让 web 开 发 更 迅速 、 简 单 。 





Æ 8.10 Bootstrap 中 文 网 


M Bootwatch: 地 址 是 http://bootswatchcom， 如 图 8.11 所 示 , 提供 各 种 风格 的 Bootstrap 
主题 下 载 ， 还 有 一 些 付 费 的 整体 方案 。 
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© Modular a alee In Le ony ees 


Changes are contained inst twa LESS or SASS Rs, AN API fax ng with your plate s by subscr 





FA 8.11 Bootwatch 首页 


E] Bootsnipp: 地 址 是 http://bootsnipp.cony, 如 图 8.12 所 示 , 这 里 可 以 找到 各 种 Bootstrap | 
的 设计 元 素 、JavaScript 插件 。 | 





Bootsnipp 


Design elements, playground and code snippets for HTML/CSS/JS framework 





图 8.12 Bootsnipp 的 资源 列表 


REA HB 


本 章 主 要 介绍 当前 最 流行 的 前 端 框架 Bootstrap， 包 括 它 的 应 用 场景 、 主 要 功能 模块 、 
定制 化 、 扩 展 资源 等 内 容 。 
Bootstrap 主要 包括 以 下 几 大 模块 。 | 
M ”基础 CSS 样式 : 包括 标题 、 段 落 、 表 单 、 表 格 、 按 钮 、 栅 格 等 基础 样式 ， 只 要 向 | | 
元 素 添 加 指定 的 类 就 可 以 获得 Bootstrap 定义 好 的 样式 。 
M ”功能 组 件 : 包括 图 标 、 下 拉 菜 单 、 导 航 、 分 页 、 按 钮 组 等 组 合 好 的 模块 ， 需要 应 
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~ e De tikautik 
| 用 Bootstrap 指定 的 HTML 结构 和 类 。 
jQuery 插件 ， 包 括 模 态 对 话 框 、 深 动 监听 、 标 签 页 切换 、 弹 出 框 、 警 告 框 、 轮 播 
| 等 常用 的 jQuery 插件 。 大 多 数组 件 无 须 编写 JavaScript 代码 , 只 需 在 HTML 标签 
er 中 应 用 指定 的 触发 器 即 可 。 
Bootstrap 提供 两 种 定制 化 的 方式 : 一 种 是 直接 在 官方 网 站 的 定制 化 页 面 修改 配置 后 下 
MEO 2, 允 种 是 下 载 源 代码, 修改 配置 文件 并 重新 编译 。 直接 在 官方 网 站 定制 虽然 简单 易 行 ， 
| 但 只 适合 修改 内 容 比 较 少 而 且 比较 明确 的 情况 ， 因 为 修改 的 状态 是 无 法 保存 的 。 下 载 源 代 
， 码 的 方式 更 适合 较为 深度 的 定制 ， 但 是 要 使 用 Bootstrap 的 自动 化 打包 工具 ， 需 要 先 安装 
| Nodejs 环境 ， 对 初学 者 来 说 有 一 定 的 难度 ， 


本 章 作业 


定制 需要 的 Bootstrap 组 件 及 插件 ， 制 作 如 图 8.13 所 示 的 网 页 。 
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8.13 ”网 页 头 部 页 面 
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开发 响应 式 企 业 网 站 


本 章 主要 介绍 Bootstrap、 布局 企业 站 首页 、HTML5、SASS 快速 搭建 企业 网 站 的 方法 。 
本 章 重 点 在 于 应 用 SASS 上 。 


使 用 Bootstrap、HTML5、SASS 快速 开发 响应 式 企业 网 站 。 


> 结合 前 面 所 学 ， 实 践 Bootstrap 框架 。 
> 掌握 快速 开发 响应 式 企业 网 站 的 方法 。 
> 掌握 实践 应 用 SASS 方法 。 





| 预习 作业 | 


> 如何 设 计 一 个 企业 网 站 ? 
六 ”企业 网 站 完整 的 开发 流程 包含 哪些 步骤 ? 
> 如 何在 网 站 中 加 入 百度 地 图 并 标注 地 理 位 置 ? 
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企业 网 站 完成 效果 如 图 9.1 Bras. 





展示 SkyApp RSH 
M. cera 
M. sanaan 
V camem 


M. crean 








图 9.1 完成 效果 


| 这 个 网 页 的 风格 参照 了 skype 的 官方 网 站 ， 如 图 9.2 所 示 ， 但 并 不 是 要 简单 地 参照 这 
种 成 功 的 配色 与 布局 ， 而 是 在 此 基础 上 应 用 相同 的 原则 来 设计 出 我 们 自己 的 网 站 ， 至 于 这 
| 个 网 页 是 如 何在 Photoshop 中 设计 出 来 的 ， 请 参照 《网 站 配色 与 布局 》 一 书 ， 里 面 有 详尽 
， 的 设计 过 程 描述 ,这 里 只 是 把 切 好 的 图 片 文件 插入 项 目 代码 中 , 通过 使 用 Bootstrap 和 SASS 


。90 。 


£94 ”开发 响应 式 企业 网 站 一 
v 









开发 前 端 代码 的 流程 。 
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图 9.2 skype 官网 的 配色 与 布局 


9.1.1 准备 SASS 


知识 。 


进行 代码 书写 的 前 提 是 你 的 计算 机 中 已 经 安装 了 SASS， 并 已 经 掌握 了 SASS 的 基础 | 


项 目 中 包含 有 首页 index html,“ 关 于 我 们 ”页 面 abouthtml， 博 客 页 blog.html, “联系 | 


我 们 ”页 面 contact.html, “我们 的 服务 ”页 面 services.html。 
9.1.2 ”构建 页 面 框架 


(1) 在 getbootsrap.com 官网 下 载 Bootstrap 源 文件 。 
(2) 下 载 jQuery。 

(3) 下 载 fontawesome。 

(4) 搭建 页 面 。 


92 设计 首页 


9.2.1 设计 index 页 面 导航 


进入 Bootstrap 官网 , 下 拉 网 页 到 Using the framework 标题 , 选择 Starter template 选项 ， | 


如 图 9.3 所 示 。 
单 击 进入 如 图 9.4 所 示 页 面 。 
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directory. 





Starter template 


Nothing but the basics. compiled CSS 
| ana JavaScript along win a container 





Get the source code for every example below by downloading the Bootstrap 


Using the framework 


Examples can be found in the docs/exanples/ 











Bootstrap theme 


Load the optional Bootstrap theme for a 
VEualy cnhanced experience 











图 9.3 Starter template 










Bootstrap starter template 


Use this document as a way to quickly start any new project 
All you get is this text and a mostly barebones HTML document. 





| 图 9.4 Starter template 专项 页 面 


右 击 查看 源 代码 ， 复 制 所 有 的 代码 ， 根 据 我们 的 效果 图 编辑 修改 后 源 代码 如 下 ; 


<!DOCTYPE html> 

| <html lang="en"> 

| <head> 

| «meta charset="utf-8"> 

| <meta http-equiv="X-UA-Compatible" content="IE=edge"> 

<meta name="viewport" content="width=device-width. initial-scale=1"> 


<title>Starter Template for Bootstrap</title> 


<!-- Bootstrap core CSS --> 
<link href-"css/bootstrap.css" rel="stylesheet"> 


| <!-- Custom styles for this template --> 
<link href"css/font-awesome.css" rel="stylesheet"> 
<link href="css/main.css" rel="stylesheet"> 


</head> 
<body> 
<nav class="navbar navbar-inverse navbar-fixed-top"> 
<div class="container"> 
<div class="navbar-header"> 


<button type="button" class="navbar-toggle collapsed" data-toggle-"collapse" 
data-target="#navbar" aria-expanded-"false" aria-controls="navbar"> 
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了 | 
We 
"sr-only"7 Toggle navigation</span> 
icon-bar"></span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
</button> 
<a class="navbar-brand" href="#">SKYAPP</a> 


“ca | Note 
<div id="navbar" class="collapse navbar-collapse"> Note 


<ul class="nav navbar-nav"> 
<li class="active"><a href="incex.html">Home</a></li> 
<li><a href="about.html">About</a></li> 
<li><a href="sevices.html">Services</a></li> 
<li><a href="blog.html">Blog</a></li> 
<li><a href="contact.html">Contact</a></li> 

</ul> 

<ul class="nav navbar-nav navbar-sub pull-right"> 
<li><a herf="#">Register</a></li> 
<li><a herf="#">Login</a></li> 

<u> 








</div><!--/.nav-collapse --> 
</div> 
</nav> 
<!-- Bootstrap core JavaScript 





E 





«1-- Placed at the end of the document so the pages load faster --> 
<script src="js/jquery.js"></script> 

x 

<script src="js/bootstrap.js"></script> 


</body> 
</html> 


代码 生成 效果 如 图 9.5 所 示 。 





图 9.5 导航 菜单 完成 效果 


。93 。 


MAXRABARER 





| 9.22 设计 安全 展示 区 


| 把 页 面 分 成 导航 区 块 、 案 例 展示 区 块 等 ， 以 代码 <section>…</section> 划 分 各 个 
”在 上 个 区 块 结束 标签 后 添加 如 下 代码 。 


Note | <section class="showcase"> 








Bd 
* 





<div class="container showcase-content"> 
<h1>Bootstrap HTMLS Template</hl> 
| <p class="lead">A clean and versatile <strong>Bootstrap 3</strong> theme<br> A responsive design 
| for your business and products</p> 
| <div class="downloads"> 
<a href="#"><img src-"img/btn-download.png" alt="Download"></a> 


| <a href="#"><img src-"img/btn-appstore.png" alt="Download"></a> 





</div> 
</section> 


| 生成 效果 如 图 9.6 所 示 。 


| Aclean and versatile Bootstrap 3 theme 
A responsive design for your business and products 


© Download Now 0 App Store 





| 图 9.6 加 入 showcase 版 块 的 页 面 效 果 
(923 ”添加 搜索 栏 
| 使 用 <section>…</section> 布 局 ， 在 showcase 区 块 结束 标签 之 后 ， 加 入 如 下 代码 : 


| <section class="section-light"> 

| «div class="container"> 

| «div class="row"> 

| «div class="col-md-6"> 

| «form class="search"> 

| <div> 
<input type="search" placeholder-"Search Our Website & Products" 
<button type="submit" value=""><img src-"img/search.png" alt="Search"></button> 
</div> 
</form> 
</div> 
<div class="col-md-6"> 





</div> 
</div> 
</div> 
</section> 
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生成 效果 如 图 9.7 所 示 。 | 








A clean and versatile Bootstrap 3 theme 
A responsive design for your business and products 


€ dowrtoatnow | L] App store 


图 9.7 加 入 搜索 栏 的 版 块 布局 | 
9.24 主体 内 容 区 块 | 
使 用 <section>…</section> 为 首页 加 入 主体 内 容 区 块 ， 代 码 如 下 : 


<section> | 
<div class="container"> 
<div class="row"> 
<div class="col-md-4"> 
<div class="block block-primary"> 
<h3><i class-"fa fa-check"></i> Sleek</h3> | 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pharetra | 
varius maximus. Cras condimentum porttitor enim a egestas. Suspendisse potenti | 
</p> 
<a href="#" class="btn btn-default">Read More</a> 
</div> 
</div> 
<div class="col-md-4"> 
<div class="block block-secondary"> 
<h3><i class="fa fa-check"></i> Responsive</h3> | 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pharetra | 
varius maximus. Cras condimentum porttitor enim a egestas. Suspendisse potenti 
</p> ! 
<a href="#" class="btn btn-default">Read More</a> | 
</div> | 
</div> | 
<div class="col-md-4"> | 
«div class="block block-primary"> | 
<h3><i class="fa fa-check"></i> Clean</h3> | 
<p>Lorem ipsum dolor sit amet. consectetur adipiscing elit. Aenean pharetra | 
varius maximus. Cras condimentum porttitor enim a egestas. Suspendisse potenti | 








</p> | 

<a href="#" class="btn btn-default">Read More</a> | 

</div> | 

</div> | 

</div> | 
</div> | 
</section> | 
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a 
生成 效果 如 图 9.8 所 示 。 


A clean and versatile Bootstrap 3 theme 
A responsive design for your business and products 


@ Gowniocsnow | [] App Store 


Fn 加 





«v Sleek v Responsive Y Clean 


! Lorem ipsum dolor sit 
| Aenean pharetra varius maxm 
| porttitor enim a egesta: 







Lorem ipsum dolor st amet, consectetur adipiscing elt 
Aenean pharetra vanus maximus. Cr. ntum 





porttitor enim a egestas. Suspendisse p 


Read More Reaa More Reac more 











| 图 9.8 加 入 主体 内 容 区 块 
9.25 添加 另 一 主体 内 容 区 块 
| 使 用 <section>…</section> 为 首页 加 入 另 一 主体 内 容 区 块 ， 代 码 如 下 : 


| <section class="no-pad-top"> 
| <div class="container"> 
<div class="row"> 

<div class="col-md-3"> 

<div class="block block-light block-center"> 

| <i class="fa fa-html5 fa-primary fa-6 fa-border"></i> 
<h3 class="heading-primary">Lorem Ipsum</h3> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pharetra 





| varius maximus.</p> 
| </div> 
| </div> 
| <div class="col-md-3"> 
<div class="block block-light block-center"> 
<i class="fa fa-pie-chart fa-primary fa-6 fa-border"></i> 
<h3 class="heading-primary">Lorem Ipsum</h3> 
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pharetra 
| varius maximus.</p> 
| </div> 
</div> 
<div class="col-md-3"> 
«div class="block block-light block-center"> 
<i class="fa fa-unlock-alt fa-primary fa-6 fa-border"></i> 
<h3 class="heading-primary">Lorem Ipsum</h3> 
<p>Lorem ipsum dolor sit amet. consectetur adipiscing elit. Aenean pharetra 
| varius maximus.</p> 
| </div> 
</div> 
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<div class="col-md-3"> | 
<div class="block block-light block-center"> 

<i class="fa fa-question-circle fa-primary fa-6 fa-border"></i> i 

<h3 class="heading-primary">Lorem Ipsum</h3> | 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pharetra 





varius maximus.</p> 
</div> 
</div> | 
</div> | 
</div> 
</section> 


生成 效果 如 图 9.9 所 示 。 | 


A clean and versatile Bootstrap 3 theme 
A responsive design for your business and products | 





4 Download Now ü App Store 


' 


v Sleek ww Responsive v Clean 








cing eit 
ndmentum | 


a Read More Read more 
e e & e | 





Lorem Ipsum Lorem Ipsum Lorem Ipsum 


elt. Aenean pharetra varius 





ipsum dolor st amet, consectetur 
eit Aenean phare 





it. Aenean pharetra varius 











图 9.9 加 入 另 一 主体 内 容 区 效果 
9.2.6 ”添加 一 个 两 栏 图 文 区 块 | 
使 用 <section>…</section> 为 首页 加 入 一 个 两 栏 图 文 区 块 ， 代 码 如 下 : | 


«section class="section-light extra-pad"> 
<div class="container"> | 
<div class="row"> | 

<div class="col-md-6"> 
<h2 class="page-header">Use <span class="em-primary">SkyApp</span> on All Devices</h2> 
<ul class="list list-feature"> 
<li><i class="fa fa-check fa-6 fa-primary"></i><span>Lorem ipsum dolor</span></li> | 
<li><i class="fa fa-check fa-6 fa-primary"></i><span>Lorem ipsum dolor</span></li> | 
<li><i class="fa fa-check fa-6 fa-primary"></i><span>Lorem ipsum dolor</span></li> 
<li><i class="fa fa-check fa-6 fa-primary"></i><span>Lorem ipsum dolor</span></li> | 
<ul> | 
<br> 
<a href="#" class="btn btn-primary bin-lg">Read More</a> 
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SS 
</div> 
<div class="col-md-6"> 
| <img class="device" src="img/device-imac.png"> 
| </div> 
BA i </div> 
i </div> 
Note </section> 
生成 效果 如 图 9.10 所 示 。 






A clean and versatile Bootstrap 3 theme 
A responsive design for your business and products. 


a D 
© Downicosnow  [] | App Store 


v Responsive v Clean 












Lorem Ipsum Lorem Ipsum Lorem Ipsum 
spacpg e& Aenean pareva varus piscing cR Aenean pharera varus 





Use SkyApp on All Devices 











图 9.10 加 入 一 个 两 栏 图 文 区 块 


(9.27 ”添加 另 一 个 两 栏 图 文 区 块 
| 使 用 <section>…</section> 为 首页 加 入 另 一 个 两 栏 图 文 区 块 ， 代 码 如 下 : 





«section class="section-primary extra-pad"> 
<div class="container"> 
<div class="row"> 
<div class="col-md-6"> 
<img class="device device-small" src="img/device-iphone.png"> 
</div> 
<div class="col-md-6"> 
<h2 class="page-header">Try SkyApp For 30 Days FREE!</h2> 
1 <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit Phasellus 
| et odio.</p> 
| <a href="#" class="btn btn-lg btn-default bin-rounded">Start Trial</a> 


* 98* 


Os AXARA&E8RÓG 一 aT 


</div> 

</div> 
</div> | 
</section> | 


生成 效果 如 图 9.11 所 示 。 



















Try SkyApp For 30 Days FREE! 


Lorem ipsum dolor sit amet, consectetur 
adipiscing elit Phasellus et odio. 






Bootstrap HTMLS template 


Start Trial 








图 9.11 添加 另 一 个 两 栏 图 文 区 块 
9.2.8 添加 footer 区 块 


最 后 使 用 <footer>…</footer> 为 首页 加 入 底部 footer 区 块 ， 代 码 如 下 : 


<footer class="footer-main"> | 
<div class="container"> 
<div class="row"> i 
<div class="col-md-4"> | 
<h4>Get The SkyAPP</h4> | 
<ul> 
<li class="app-appstore"><a href="#">App Store</a></li> 
<li class="app-play"><a href="#">Google Play Store</a></li> 
<li class="app-droid"><a href="#">Android Market</a></li> 
<li class="app-windows"><a href="#">Windows</a></li> 
<li class="app-chrome"><a href="#">Google Chrome Store</a></li> 
<All> i 
</div> | 
<div class="col-md-4"> 
<h4>About</h4> | 
<u> | 
<li><a href="#">What is SkyApp?</a></li> 
<li><a href="#">View Our Products</a></li> 
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<li><a href="#">Advertise With Us</a></li> 
<li><a href="#">Careers</a></li> 

<li><a href="#">Web Development</a></li> 
<h> 


yr) | </div> 


<div class="col-md-4"> 


| <h4>Support</h4> 
Note | Ded 


<li><a href="#">Support Home</a></li> 
<li><a href="#">Our Community</a></li> 
<li><a href="#">Send A Ticket</a></li> 
<li><a href="#">Contact Us</a></li> 


<l> 
</div> 
</div> 
</div> 
</footer> 
生成 效果 如 图 9.12 所 示 。 
一 一 一 一 


Try SkyApp For 30 Days FREE! 






Lorem ipsum dolor sit amet, consectetur 
adipiscing elit Phasellus et odio. 


Bootstrap HTMLS template 











9.12 添加 footer [X 
| 至 此 ， 首 页 就 完成 了 ， 可 以 复制 这 个 页 面 重 命名 为 about html，9.3 节 将 以 此 为 基础 设 
| tt about.html 页 面 。 
(92.9 添加 页 面 样式 
| 现在 页 面 结 构 完成 了 ， 可 以 进入 页 面 美 化 的 部 分 ， 也 就 是 网 页 的 CSS 部 分 ， 接 下 来 用 
| SASS 来 编辑 这 个 案例 。 
| 1. BELL koala 的 安装 


| 首先 进入 页 面 ， 根 据 系 统 下 载 所 需要 的 koala 的 版 本 ， 然 后 在 下 载 文 件 夹 中 安装 下 载 
”的 EXE 文件 ， 即 可 安装 成 功 。 
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57 
2. 版面 区 域 介绍 (如 图 9.13 所 示 ) | 


第 一 步 : 首先 单 击 左 侧 项 部 区 域 的 齿轮 按钮 ， 设 置 默认 文件 的 编译 方式 ， 并 把 界面 语言 | 
置 为 中 文 ， 单 击 OK 按钮 后 重启 软件 ， 如 图 9.14 所 示 。 | ; 
oala =e | EA 


— ima ~ 


Drag and drop a folder to add project. 








图 9.13 koala 界面 


zm] s 
| Settings x 


I Genera! General 





Ok Cancel 


9.14 koala 设置 中 文 界面 


然后 的 设置 如 图 9.15 所 示 。 | 

第 二 步 : 添加 main.sess 文件 ， 可 通过 界面 左 栏 区 域 的 加 号 按钮 添加 ， 也 可 以 直接 将 项 | 
目 拖 到 右 栏 project 区 域 。 | 

第 三 步 : 单 击 main.scss 文件 ,在 第 四 区 域 下 设置 该 文件 具体 的 编译 方式 ， 如 果 没 什么 ， 
特别 的 ， 直 接 用 默认 设置 即 可 ， 如 果 不 需 要 动态 编译 ， 直 接 取消 选中 “即时 编译 ” 复 选 框 。 | 

第 四 步 : 单 击 main scss 的 巴 图 标 ， 在 弹出 的 窗口 中 选择 编译 后 的 main css 的 输出 目录 。 ， 
现在 可 以 写 首 页 的 样式 文件 了 。 
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| pma. l 

| T General Sass 

| LEss Language: [Ey 7) saam 

| S Minimee To T Is compass Mod 
| ass compass Mode 





Ninimze On 


ops v Source Map 
Note fesser in Lre Comments 


x t M. Debug Info 





畏 出 方式 : expanded v 


BRE 
[Oi] 
使 用 指定 的 Sass 遍 译 器 : D 








图 9.15 koala 中 文 界面 


Main.scss 代码 如 下 : 


/* 

SkyApp Bootstrap Sass Theme 
Author: Cherry Green 
Version: 0.0.1 

s) 

/* Font Colors */ 


$base-font-size:15px; 
$base-font-family:"Segoe UI","Segoe WP"."Segoe Regular", sans-serif: 
$base-font-color:#666666; 


/* Background Colors */ 


| $primary-color:#00aff0: 

| $secondary-color:#7fba00; 
| $light-color:#e4eef2: 

! $dark-color:#2b5464; 


| /* Showcase Area */ 


$showcase-height:400px: 
$showcase-image-’../img/showcase.jpg': 


/* Mixins */ 
@mixin border-radius($radius) { 


-moz-border-radius:$radius: 
-webkit-border-radius:$radius: 
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border-radius:$radius; 
} 





@mixin add-border(Ssize, $color, $position) { 
@if $position = ‘all’ { 
border:$size solid $color: 

} @else if $position = 'top' { 
border-top:$size solid $color: 

} @else if $position == 'bottom' { 
border-bottom:$size solid $color; 

} @else if $position = 'right' { 
border-right:$size solid $color; 

} @else if $position = "left { 
border-left:$size solid $color; 

} @else if Sposition — 'top-bottom' { 
border-top:$size solid $color; 
border-bottom:$size solid $color; 

} (else if $position == 'right-left' { 
border-left:$size solid $color; 
border-right:$size solid $color; 

} 





@mixin add-background($color) { 
background:$color; 
@if $color = $light-color{ 
color:#666666; 
} @else { 
color:#fffttt: 
} 
} 


body{ 
font-family:$base-font-family: 
font-size:$base-font-size; 
line-height:1.7em; 
color:$base-font-color: 


} 


at 
color:$primary-color: 
} 


ulli( 
list-style:none: | 
} 


input, textarea, button{ 
@include border-radius(Opx): 
} 

/* Navbar */ 
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az 


.navbar{ 
width:9096; 
margin:auto; 
@include add-border(1px, #e7e7e7, 'right-left’); 
border-color:#e7e7e7: 
min-height:60px: 
background:#fff; 
margin-bottom:30px: 





| af 
| color:$primary-color !important: 
| font-size:20px: 
letter-spacing:-0.5px: 
padding-bottom:24px !important: 
| padding-top:20px !important: 


| -page-header{ 
| margin-top:30px: 
| } 


| .DO-pad-top{ 
| padding-top:0: 
| } 


.extra-pad{ 

| padding-top:40px: 
padding-bottom:40px: 

} 


| -top-inner( 
padding:90px 0 30px 0: 

} 

/* Image Sizes */ 

| .img-xsmfwidth:100px:} 

| -img-sm (width:200px:) 
img-lg {width:400px:} 
-img-xlg (width: 700px:) 


.Clearfix { 
clear: both: 
} 


.navbar-inverse .navbar-nav >li >a:hover, .navbar-inverse .navbar-nav >li >a:focus, .navbar-inverse .navbar- 
| nav > .active >a, .navbar-inverse .navbar-nav > .active >a:hover, .navbar-inverse .navbar-nav > .active >a:focus{ 
| background:$primary-color !important 
| color:#fff !important: 
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/* Sections */ 





section { 


oe 


.section-showcase ( 
height:$showcase-height: 
background:url($showcase-image) no-repeat top center: 


.showcase-content ( 
padding:110px 15px; 
text-align:center; 


} 


hit 
color:$primary-color: 
} 
} 


.section-primary ( 
@include add-background(Sprimary-color): 
} 


.section-primary-a { 

@extend .section-primary; 

@include add-border(4px, $secondary-color, top): 
} 


-section-primary-b { 

@extend .section-primary: 

@include add-border(4px. $secondary-color, bottom): 
} 


-section-secondary { 

@include add-background($secondary-color); 
} 

.section-light( 

@include add-background($light-color): 

} 


.section-dark { | 
@include add-background(Sdark-color): ! 
} 

/* Searchbox */ 


.search( 
width: 10096: 
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h3{ 
margin-top:0: 
padding-top:0; 
} 


input[type="search"] { 
border:0; 
height:50px: 
width:80%; 
border:2px solid $primary-color; 
font-size: 1 8px: 
padding-left: 0px: 
padding-bottom:Spx; 
} 





button{ 
border:0; 
background:none: 
padding:0; 
vertical-align:top; 
margin-left:-4px: 
} 


} 
/* Blocks */ 


.block( 
padding:15px; 
margin-bottom: 15px: 


h3{ 
margin-top:0: 
padding-top:0: 
} 


iframe { 
width: 100%: 
} 
} 


-block-primary { 

@extend .block: 

@include add-background($primary-color): 
} 


.block-secondary { 

@extend .block: 

@include add-background($secondary-color): 
} 


block-light{ 
@extend block: 
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@include add-background($light-color): 
} 





-block-dark { 

@extend block: 

@include add-background($dark-color): 
} 





.block-center( 
text-align:center 'important; 
} 


-block-image img { 
width: 100%; 
} 


block-border{ 
@include add-border(1px, #ecccce, all); 
} 


-block-primary-head { 
h3{ 
padding: 15px 5px 15px 10px: 
@include add-background($primary-color): 
margin:0; 
font-size: 1 8px 


.block-content { 
@include add-border(1px. $primary-color, all); 
padding: 10px: 
} 
} 


.block-icon( 
h3{ 
padding:0: 
margin:0; 
} 


.icon{ 

float:left; 

width:20%: 

margin-top: 10px: | 
) | 


.icon-content{ 
float:left; 
width:70%: 

} 

} 
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-no-pad-top {margin-top:0:} 
/* Lists */ 


list { 


| margin-bottom:30px: 
j 


list-feature { 
@extend list; 
margin:0; 
padding:0; 
width:80%; 





lit 
line-height:3.6em; 

@include add-border(1px, #eccecc, bottom); 
overflow:auto; 


} 


li:last-child { 
| border:0; 
| } 


span{ 
vertical-align:top: 
padding-top:9px: 
font-size:120%; 
} 


i{ 
margin-top:-9px: 
margin-right: 5px; 
} 
5 


-list-comments { 
margin:0; 
padding:0: 

} 


.list-comments li ( 
padding: 10px 0 Spx 0: 

@include add-border(1px. #ccccce, bottom): 
overflow:auto !important: 

} 


-list-comments li:last-child ( 


border:0: 
H 
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.ist-comments img { 
width: 100px: | 
} | 


/* Icons */ 





fa-2{ 
font-size:18px: 

} 

fa-3{ 
font-size:24px; 

} 

fa-4{ 
font-size:27px: 

} 

fa-5{ 
font-size:35px: 

} 

fa-6{ 
font-size:40px: 

} 





-fa-primary { 
color:$primary-color; 
} 


fa-border{ 
@include add-border(1px. $primary-color, all): 
@include border-radius(5px): 
padding: 13px 15px; 
width:70px: 
margin-bottom: 10px: 
} 
/* Headings */ 


-heading-primary { 
color:$primary-color: 
} 


-heading-primary-a{ 

@extend .heading-primary: 

@include add-border(2px. $primary-color. bottom): 
} 


-heading-secondary { | 
color:$secondary-color: | 
} 


-heading-secondary-a( 

@extend .heading-secondary: 

@include add-border(2px. $secondary-color. bottom): 
} 
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-heading-light { 
color:$light-color: 
} 





-heading-light-a{ 


| @extend heading-light: 
@include add-border(2px, $light-color, bottom); 
| } 


-heading-dark ( 
color:$dark-color: 
} 


-heading-dark-a( 

@extend .heading-dark: 

@include add-border(2px, $dark-color, bottom); 
H 


/* Buttons */ 


-btn-primary( 

@include add-background($primary-color): 
@include add-border(2px, #ffffff all); 

} 


-btn-primary:hover { 
background: darken($primary-color, 10%); 
@include add-border(2px, ?ffffff, all); 
} 
img.device{ 
width: 100%: 
} 


img.device-small { 
width:7096; 
margin-bottom:-40px: 
} 


/* Footer */ 


-footer-main { 
@include add-background(Sdark-color): 
@include add-border(Spx. $secondary-color.top): 
min-height:200px: 
padding:30px 0: 
z-index:100: 


at 


color-zffffff. 
} 


ul{ 
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lif 
line-height: 1.8em: 
list-style:none; 
H 
} 


编译 后 ， 最 后 的 效果 如 图 9.16 所 示 。 
-m 
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Bootstrap HTMLS Template, | | J " 
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(^ Bootstrap 3 


图 9.16 首页 设计 完成 后 的 效果 
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93 设计 about.html 页 面 


Note | 9.3.1 保留 页 面 通 用 部 分 ， 添 加 about.html 页 面 区 块 
| 在 导航 结束 下 删除 .showcase 区 块 , 同时 在 搜索 区 块 下 添加 一 个 12 列 的 区 块 , 代码 如 下 : 
| 


| <section class="section-primary-a"> 
| <div class="container"> 





«div class="row"> 
<div class="col-md-12"> 
<h2>Building technology to shape our future</h2> 
</div> 


| 
| 
| 
| 
| 
| 
| 生成 效果 如 图 9.17 所 示 。 

| Mg - a 
| 

| 

| 

| 

| 

| 





Building technology to shape our future 


| 图 9.17 添加 区 块 
9.3.2 ”添加 页 面 主体 区 块 


网 页 主体 分 成 左右 两 栏 ， 左 侧 是 一 个 幻灯 片 及 说 明 页 。 右 侧 为 一 个 折 秋 菜单。 相信 读 
”者 能 很 快 做 出 这 样 的 布局 ， 下 面 是 布局 代码 : 


| <section class="section-main"> 

| <div class="container"> 

| «div class="row"> 

| <div class="col-md-8"> 
| </div> 

| <div class="col-md-4"> 
| </div> 

| </div> 

| </div> 

| </section> 

| 

| 

| 

| 

| 

| 


(1) 左 侧 在 <div class="col-md-8"> 中 添加 如 下 代码 : 


<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
<!-- Indicators --> 
«ol class="carousel-indicators"> 
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
<lidata-target="#carousel-example-generic" data-slide-to="1"></li> 
<li data-target="#carousel-example-generic" data-slide-to="2"></li> 
</ol> 
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<!-- Wrapper for slides --> 
<div class="carousel-inner"> 
«div class="item active" 
<img src-"img/slidel.jpg" alt="..."> 
</div> 
<div class="item"> 
<img src-"img/slide2 jpg" alt="..."> 
</div> 
<div class="item"> 
<img src-"img/slide3.jpg" alt="..."> 
</div> 
</div> 





<!-- Controls --> 
<a class="left carousel-control" href="#carousel-example-generic" role="button" data- | 


slide="prev"> | 
<span class="glyphicon glyphicon-chevron-left"></span> | 

</a> H 

<a class="right carousel-control" href="#carousel-example-generic" role="button" data- | 

slide="next"> | 
<span class="glyphicon glyphicon-chevron-right"></span> | 

</a> | 

</div> | 


<h2 class="page-header heading-primary-a">About</h2> 
<p>In lacinia ipsum sit amet ultricies semper. 


</p> 
<p>Donec non est gravida, condimentum mauris sed, 


</p> | 
(2) 右 侧 <div class="col-md-4"> 中 添加 如 下 代码 : 


<h2 class="page-header">Lorem Ipsum</h2> ! 
<ul class="list list-feature"> | 
<li><i class="fa fa-check fa-6 fa-primary"></i><span>Lorem ipsum dolor</span></li> 
<li><i class="fa fa-check fa-6 fa-primary"></i><span>Lorem ipsum dolor</span></li> i 
<li><i class="fa fa-check fa-6 fa-primary"></i><span>Lorem ipsum dolor</span></li> | 
<li><i class="fa fa-check fa-6 fa-primary"></i><span>Lorem ipsum dolor</span></li> | 
</ul><div class="panel-group" id="accordion"> 
<div class="panel panel-default"> 
<div class="panel-heading"> i 
<h4 class="panel-title"> | 
<a data-toggle-"collapse" data-parent="#accordion" href="#collapseOne"> | 
<span class="em-primary">Who</span> We Are | 
<a> | 
</h4> i 
</div> | 
<div id="collapseOne" class="panel-collapse collapse in"> | 
<div class="panel-body"> i 
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. | 
</div> | 
</div> | 
</div> | 
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<div class="panel panel-default"> 
<div class="panel-heading"> 
<h4 class="panel-title"> 
<a data-toggle-"collapse" data-parent="#accordion” href="#collapseTwo"> 
<span class="em-primary">What</span> We Do 
</a> 


</h4> 
Note < 
| <div id="collapseTwo" class="panel-collapse collapse"> 
<div class="panel-body"> 
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 
</div> 
</div> 
</div> 
<div class="panel panel-default"> 
<div class="panel-heading"> 
<h4 class="panel-title"> 
<a data-toggle-"collapse" data-parent="#accordion" href="#collapseThree"> 
<span class="em-primary">Why</span> Choose Us? 
</a> 
</h4> 
</div> 
<div id="collapseThree" class="panel-collapse collapse"> 
<div class="panel-body"> 
Anim pariatur cliche reprehenderit. enim eiusmod high life accusamus terry richardson ad squid. 
</div> 
</div> 
</div> 
</div> 


| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
生成 效果 如 图 9.18 所 示 。 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
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图 9.18 Bootstrap 2 的 应 用 案例 BREAKING NEWS 
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9.3.3 添加 团队 展示 区 块 
添加 团队 展示 区 块 的 代码 如 下 : 


<section> 
<div class="container"> 
<div class="row"> 
<h2 class="page-header heading-secondary-a">Meet Our Team</h2> 
<div class="col-md-3"> 
<div class="block block-light block-center block-image block-border"> 
<img src="img/headshotl jpg"> 
<h3>Jane Doe</h3> 
<p>Lorem ipsum dolor sit amet. consectetur adipiscing elit. Aenean pharetra 
varius maximus. 
</p> 
</div> 
</div> 
<div class="col-md-3"> 
<div class="block block-center block-image block-border"> 
<img src="img/headshot2.jpg"> 
<h3>Jane Doe</h3> 
<p>Lorem ipsum dolor sit amet. consectetur adipiscing elit. Aenean pharetra 
varius maximus. 
</p> 
</div> 
</div> 
«div class="col-md-3"> 
<div class="block block-light block-center block-image block-border"> 
<img src-"img/headshot3.jpg" 
<h3>Jane Doe</h3> 
<p>Lorem ipsum dolor sit amet.consectetur adipiscing elit. Aenean pharetra 
varius maximus.</p> 
</div> 
</div> 
<div class="col-md-3"> 
<div class="block block-center block-image block-border"> 
<img src="img/headshot4 jpg" 
<h3>Jane Doe</h3> 
<p>Lorem ipsum dolor sit amet. consectetur adipiscing elit. Aenean pharetra 
varius maximus. </p> 
</div> 
</div> 
</div> 
</div> 
</section> 


执行 代码 ， 生 成 效果 如 图 9.19 所 示 。 
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Meet Our Team 





Jane Doe Jane Doe Jane Doe 


图 9.19 添加 团队 展示 效果 区 块 
9.3.4 添加 另 一 标题 区 块 
代码 如 下 : 


<section class="section-primary-b"> 
<div class="container"> 
<div class="row"> 
<div class="col-md-12"> 
<blockquote class="blockquote blockquote-reverse"> 
<h1>"I do not believe you can do today's job with yesterday's methods and be 
in business tomorrow"</h1> 
<em>Nelson Jackson</em> 
</blockquote> 
</div> 
</div> 
</div> 
</section> 


生成 效果 如 图 9.20 所 示 。 


1 do not believe you can do today's job with yesterd. 


and be in busine: 





图 9.20 另 一 标题 区 块 
至 此 ，about.html 页 面 已 经 全 部 完成 ， 下 面 复制 3 次 ， 分 别 重 命名 为 services.html、 
blog.html 和 contact.html。9.4 节 将 专门 设计 services.html。 


9.3.5 为 about.html 页 面 添 加 样式 


由 于 index.html 页 面 已 经 完成 大 部 分 的 样式 ， 所 以 abouthtml 页 面 只 需要 在 main.scss 
中 加 入 如 下 几 行 代码 ， 就 可 以 轻松 完成 样式 。 


-no-pad-top {margin-top:0:} 
/* Carousel */ 
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„carousel { | 
margin-bottom:20px: | 


.Carousel img{ 


padding:3px: | SA 


@include add-border(1px, #ecccce, all): i 
) 
-heading-primary-a( | 
@extend .heading-primary: | 
@include add-border(2px. $primary-color. bottom): | 


} 

-heading-secondary-a{ 

@extend .heading-secondary: 

@include add-border(2px, $secondary-color, bottom); 


} 

-block-image img { 
width: 100%; 

} 

.em-primary { 
color:$primary-color: 


经 编译 后 ， 完 成 效果 如 图 9.21 所 示 。 | 





9.21 about.html 
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9.4 设计 services.html 7t d 


(941 保留 页 面 通 用 部 分 ， 修 改 主体 页 面 区 块 
在 导航 结束 下 删除 .showcase 区 块 , 同时 在 搜索 区 块 下 添加 一 个 12 列 的 区 块 , 代码 如 下 : 


<section class="section-main"> 
<div class="container"> 
«div class="row"> 
<div class="col-md-8"> 
<h2 class="page-header heading-primary-a">Services</h2> 
<p>In lacinia ipsum sit amet ultricies semper. 








</p> 
<br><br> 
<div class="panel-group" id="accordion"> 
<div class="panel panel-default"> 
<div class="panel-heading"> 
<h4 class="panel-title"> 
| <a data-toggle="collapse" data-parent="#accordion" href= "#collapse 
| One"> Service One</a> 
| </h4> 
</div> 
<div id="collapseOne" class="panel-collapse collapse in"> 
<div class="panel-body"> 
Anim pariatur cliche reprehenderit, 


</div> 
</div> 
</div> 
<div class="panel panel-default"> 
<div class="panel-heading"> 
<h4 class="panel-title"> 
<adata-toggle="collapse" data-parent="#accordion” href= "#collapseTwo"> 
Service Two 
</a> 
</h4> 
</div> 
<div id="collapseTwo" class="panel-collapse collapse"> 
<div class="panel-body"> 
Anim pariatur cliche reprehenderit, 


</div> 
</div> 
</div> 
«div class="panel panel-default"> 
<div class="panel-heading"> 
<h4 class="panel-title"> 
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<a data-toggle-"collapse" data-parent="#accordion" href= "#collapseThree"> 








Service Three 
</a> 
</h4> 
</div> 
<div id-"collapseThree" class-"panel-collapse collapse" | 
ee | Note 
Anim pariatur cliche reprehenderit, | JNote 
</div> | 
</div> | 


</div> | 
</div> i 
<div class="col-md-4"> 
<div class="tab tab-primary"> 
<ul id-"myTab" class-"nav nav-tabs" role="tablist"> | 
<li><a href="#home" role="tab" data-toggle="tab">Services</a></li> | 
<li class="active"><a href="#profile" role="tab" data-toggle="tab">About</a></li> 
<li><a href="#profile" role="tab" data-toggle="tab">Support</a></li> 
</ul> | 
<div id-"myTabContent" class="tab-content"> | 
<div class="tab-pane fade in active" id="home"> 
<p>Raw denim you probably haven't heard of them jean shorts 


</p> | 

</div> 
«div class="tab-pane fade" id="profile"> 
<p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla | 


</p> | 

</div> | 
<div class="tab-pane fade" id="dropdown1"> | 
<p>Etsy mixtape wayfarers, | 

<p> | 

</div> | 
<div class="tab-pane fade" id="dropdown2"> | 
«p» Trust fund seitan letterpress. | 

</p> | 

</div> | 
</div> | 
</div> | 


«div class="block block-primary-head no-pad"> | 
<h3><i class="fa fa-pencil"></i> Quick Quote</h3> | 
<div class="block-content"> | 

<form role="form"> | 
<div class="form-group"> | 
<label>Name</label> | 


tige 
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<input type="text" class-"form-control" placeholder="Enter 


name"> 





| phone"> 


Note 


</div> 
<div class="form-group"> 
<label>Phone Number</label> 


<input type="text" class-"form-control" placeholder="Enter 


</div> 
<div class="form-group"> 
<label>Email address</label> 


<input type="email" class-"form-control" placeholder="Enter 


</div> 
<div class="form-group"> 
<label>Message</label> 
<textarea class="form-control"></textarea> 
</div> 


<button type="submit" class="btn btn-primary">Submit</button> 


</form> 
</div> 
</div> 
</div> 
</div> 
</div> 
</section> 


<section class="section-primary"> 
<div class="container"> 
<h2 class="page-header">What We Do</h2> 
«div class="row"> 
<div class="col-md-4"> 
<div class="block block-icon"> 
<div class="icon"> 
<i class="fa fa-home fa-6"></i> 
</div> 
<div class="icon-content"> 
<h3>Lorem ipsum</h3> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
</div> 
</div> 
</div> 
<div class="col-md-4"> 
<div class="block block-icon"> 
<div class="icon"> 
<i class="fa fa-home fa-6"></i> 
</div> 
<div class="icon-content"> 
<h3>Lorem ipsum</h3> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
</div> 
</div> 
</div> 
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«div class="col-md-4"> 








«div class-"block block-icon"> 
«div class="icon"> 
<i class="fa fa-home fa-6"></i> 
</div> 
<div class="icon-content"> ] 
<h3>Lorem ipsum</h3> i 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
</div> | 
</div> | 
</div> | 
<div class="row"> | 
<div class="col-md-4"> | 
<div class="block block-icon"> | 
<div class="icon"> | 
<i class="fa fa-home fa-6"></i> | 
</div> | 
<div class="icon-content"> | 
<h3>Lorem ipsum</h3> | 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> | 
</div> | 
</div> | 
</div> | 


<div class="col-md-4"> 
<div class="block block-icon"> | 
<div class="icon"> | 
<i class="fa fa-home fa-6"></i> | 
</div> 
<div class="icon-content"> | 
<h3>Lorem ipsum</h3> | 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
</div> 
</div> | 
</div> 
<div class="col-md-4"> 
<div class="block block-icon"> 
<div class="icon"> | 
<i class="fa fa-home fa-6"></i> | 


执行 代码 ， 生 成 效果 如 图 9.22 所 示 。 


</div> 
<div class="icon-content"> | 
<h3>Lorem ipsum</h3> | 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> | 
</div> | 
</div> | 
</div> | 
</div> | 
</section> | 
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Services 








f Quick Quote 


Name 





Phone Number 


Service One Email address 





Service Two. 


Service Three 








| 图 9.22 services.html 主体 内 容 区 
| 9.4.2 添加 what we do 区 块 
| 在 导航 结束 下 删除 .showcase Kik, 同时 在 搜索 区 块 下 添加 一 个 12 列 的 区 块 , 代码 如 下 : 





| <section class="section-primary"> 
| <div class="container"> 
<h2 class="page-header">What We Do</h2> 
| «div class="row"> 
| <div class="col-md-4"> 
| <div class="block block-icon"> 
| <div class="icon"> 
| <i class="fa fa-home fa-6"></i> 
| </div> 
<div class="icon-content"> 
<h3>Lorem ipsum</h3> 
| <p>Lorem ipsum dolor sit amet. consectetur adipiscing elit.</p> 
| </div> 
</div> 
</div> 
<div class="col-md-4"> 
<div class="block block-icon"> 
<div class="icon"> 
<i class="fa fa-home fa-6"></i> 
</div> 
<div class="icon-content"> 
<h3>Lorem ipsum</h3> 
<p>Lorem ipsum dolor sit amet. consectetur adipiscing elit.</p> 
</div> 
</div> 
</div> 
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<div class="col-md-4"> 
<div class="block block-icon"> 
<div class="icon"> 
<i class-"fa fa-home fa-6"></i> 
</div> 
<div class="icon-content"> 


<h3>Lorem ipsum</h3> Note 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p> 


</div> 
</div> 
</div> 
</div> 
«div class="row"> | 
<div class="col-md-4"> | 
<div class="block block-icon"> 
<div class="icon"> 
<i class="fa fa-home fa-6"></i> | 
</div> | 
<div class="icon-content"> 
<h3>Lorem ipsum</h3> | 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> | 
</div> | 
</div> 
</div> | 
<div class="col-md-4"> | 
<div class="block block-icon"> | 
<div class="icon"> 
<i class="fa fa-home fa-6"></i> 
</div> | 
<div class="icon-content"> | 
<h3>Lorem ipsum</h3> | 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
</div> | 
</div> | 
</div> 
<div class="col-md-4"> 
<div class="block block-icon"> | 
<div class="icon"> 
<i class="fa fa-home fa-6"></i> i 
</div> | 











执行 代码 ， 生 成 效果 如 图 9.23 所 示 。 


<div class="icon-content"> | 

<h3>Lorem ipsum</h3> | 

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> | 
</div> | 

</div> | 

</div> | 

</div> | 

</div> | 
</section> | 
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A Li a 


Lorem ipsum Lorem ipsum Lorem ipsum 





Lj A A 


Lorem ipsum Lorem ipsum Lorem ipsum 





图 9.23 添加 what we do 内 容 区 


| 9.4.3 添加 scss 样式 
在 main.scss 中 添加 以 下 几 行 代码 : 


/* services.html */ 
/* Tabs */ 


| 
| 

| 

| 

| 

| -tab-pane( 

| padding:20px 10px: 

| @include border-radius(Spx); 
| margin-bottom:20px: 

} 

I 

| 

| 

| 

| 

| 

| 


| .tab-primary .tab-pane.tab-primary .nav-tabs > liactive > a, .tab-primary .nav-tabs > li.active > 
| a:hover, .tab-primary .nav-tabs > li.active > a:focus{ 

background:$primary-color; 

color:#fff; 

} 

-block-primary-head { 

h3{ 

padding:15px Spx 15px 10px: 

@include add-background(Sprimary-color): 
margin:0: 
font-size:18px 
} 


| 

| 

| 

| 

| 

| 

| 

| 

| .block-content{ 
| @include add-border(1px. $primary-color, all); 
| padding:10px; 
| 

| 

| 

| 

| 

| 

| 

| 

| 

| 
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Acon( | 
float:left; | 
width:20%: | 
margin-top: 10px: | 

} | 


ETTR | Note 
T Note 


width:70%; 
} 
} 


效果 如 图 9.24 所 示 。 


Building technology to shape our future 























图 9.24 services.html 页 面 效 果 图 
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az 


9.5 设计 blog.html 页 面 





9.5.1 保留 页 面 通 用 部 分 ， 修 改 主体 页 面 区 块 
在 导航 结束 下 删除 .showcase Kik, 同时 在 搜索 区 块 下 添加 一 个 12 列 的 区 块 , 代码 如 下 : 


<section class="section-main"> 
<div class="container"> 
«div class="row"> 
| <div class="col-md-8"> 
| <h2 class="page-header">Read Our Blog</h2> 





| <div class="blog-post"> 

i <h2 class="page-header">In lacinia ipsum sit amet</h2> 

| <img src-"img/blogl.png" class="img-sm img-bordered blog-featured"> 
<p>In lacinia ipsum sit amet ultricies semper. 





| </div> 
<div class="post-meta"> 
<i class="fa fa-clock-o"></i> Aug 31, 2014 
<i class="fa fa-user"></i> Brad Traversy 
<i class="fa fa-folder"></i> Graphic Design, Web Development 
<a class-"pull-right" href="#">Read More</a> 
| </div> 


| <div class="blog-post"> 

i <h2 class="page-header">In lacinia ipsum sit amet</h2> 

<img src-"img/blog1.png" class="img-sm img-bordered blog-featured"> 
<p>In lacinia ipsum sit amet ultricies semper. Nulla facilisi. Proin et nulla 


| <div class="post-meta"> 
| <i class="fa fa-clock-o"></i> Aug 31, 2014 

<i class="fa fa-user"></i> Brad Traversy 

<i class="fa fa-folder"></i> Graphic Design. Web Development 
| <a class="pull-right" href="#">Read More</a> 
| </div> 


<div class="blog-post"> 
«h2 class="page-header">In lacinia ipsum sit amet</h2> 
<img src-"img/blogl.png" class="img-sm img-bordered blog-featured"> 
<p>In lacinia ipsum sit amet ultricies semper. Nulla facilisi. Proin et nulla 


</div> 
«div class="post-meta"> 
<i class="fa fa-clock-o"></i> Aug 31. 2014 
| <i class="fa fa-user"></i> Brad Traversy 
i <i class="fa fa-folder"></i> Graphic Design, Web Development 
| <a class="pull-right" href="#">Read More</a> 
| </div> 
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</div> 
<div class="col-md-4"> 
<h2 class="page-header">Lorem Ipsum</h2> 
<!-- Tab Widget --> 
<div class="tab tab-light"> 
<ul class="nav nav-tabs" role="tablist"> 
<li><a href="#services" role-"tab" data-toggle="tab">Services</a></li> 
<li class="active"><a href="#about" role="tab" data-toggle="tab">About</a></li> 
<li><a href="#support" role="tab" data-toggle="tab">Support</a></li> 
</ul> 


<!-- Tab panes --> 
<div class="tab-content"> 
<div class-"tab-pane" id="services"> 
<h3>Services</h3> 
<p>Condimentum mauris sed, bibendum lectus. Duis posuere turpis 
</p> 
</div> 
<div class="tab-pane active" id="about"> 
<h3>About Us</h3> 
<p>Donec non est gravida, condimentum mauris sed, bibendum 
</p> 
</div> 
<div class="tab-pane" id="support"> 
<h3>Customer Support</h3> 
<p>Interdum et malesuada fames ac ante ipsum primis in faucibus. 
</p> 
</div> 
</div> 
</div> 
<div class="block block-primary-head no-pad"> 
<h3><i class="fa fa-play-circle"></i> Featured Video</h3> 
<div class="block-content"> 





<iframe width="208" height-"208"  src-"http://www.youtube.com/embed/ | 


rUeiZ6c6EBw" frameborder-"0" allowfullscreen></iframe> 
</div> 
</div> 
<div class="block block-primary-head no-pad"> 
<h3><i class="fa fa-comment"></i> Recent Comments</h3> 
<div class="block-content"> 
<ul class="list-comments"> 
<li> 
<img src="img/headshot1.jpg" class="pull-left img-circle"> 
<p>Duis posuere turpis augue. Curabitur mattis feugiat 
</p> 
<i> 
<div class="clearfix"></div> 
<li> 
<img src="img/headshot2 jpg" class="pull-left img-circle"> 
<p>Duis posuere turpis augue. Curabitur mattis feugiat 
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</p> 

<li> 

<div class="clearfix"></div> 

<li> 
<img src-"img/headshot3 jpg" class="pull-left img-circle"> 
<p>Duis posuere turpis augue. Curabitur mattis feugiat 








<div class="clearfix"></div> 

<li> 
| <img src-"img/headshot4 jpg" class="pull-left img-circle"> 
| <p>Duis posuere turpis augue. Curabitur mattis feugiat 


<li> 


| </div> 
</div> 
</div> 
</section> 


| 删除 不 用 的 区 块 ， 完 成 blog.html 页 面 的 设计 。 生 成 效果 如 图 9.25 所 示 。 








图 9.25 blog html 页 面 
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9.5.2 添加 blog.html 样式 
在 main.scss 中 添加 如 下 代码 : 


/* services.html */ 
/* Tabs */ 





-tab-pane( 
padding:20px 10px: 

@include border-radius(5px): 
margin-bottom:20px: 


} 


-tab-primary .tab-pane..tab-primary .nav-tabs > li.active > a, .tab-primary .nav-tabs > li.active > 
a:hover, .tab-primary .nav-tabs > li.active > a:focus{ 

background:$primary-color; 

color:#fff 

} 

-block-primary-head { 

h3{ 

padding: 15px 5px 15px 10px; 

@include add-background($primary-color); 
margin:0; 
font-size: 1 8px 


} 


.block-content ( 
(Q include add-border(1px, $primary-color, all); 
padding: 10px: 
} 
} 


-block-icon{ 
h3( 
padding:0: 
margin:0; 

} 


-icon{ 
float:left; 
width:20%: 
margin-top: LOpx: 

} 


.icon-content { 
float:left; ! 
width:70%: | 

} | 
} | 
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执行 代码 ， 生 成 效果 如 图 9.26 所 示 。 


可 


E 








Note 
! Read Our Blog Lorem Ipsum. 
In lacinia ipsum sit amet 


i 


In lacinia ipsum sit amet 


In lacinia ipsum sit amet 








926 ”添加 样式 后 的 blog .html 页 面 


9.6 设计 contact.html 页 面 


9.6.1 保留 页 面 通用 部 分 ， 添 加 公司 地 址 
添加 公司 地 址 项 ， 代 码 如 下 ; 
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iw 
«section class="section-map"> 


iframe src-"baidu map.html" width="1600" height="400" frameborder="0" style="border:0"> </iframe> | 
</section> 


生成 效果 如 图 9.27 所 示 。 
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图 927 添加 公司 地 址 | 


9.6.2 添加 用 户 表单 
代码 如 下 : 


<section class="section-main"> i 
<div class="container"> 
<div class="row"> 
<div class="col-md-8"> 


<h2 class="page-heading">Contact Us</h2> 
<form role="form"> 


<div class="form-group"> 
<label>Name</label> 
<input type="text" class-"form-control" placeholder="Enter name"> | 
</div> | 
<div class="form-group"> | 
<label>Phone Number</label> 
<input type="text" class-"form-control" placeholder="Enter phone" 
</div> 
<div class="form-group"> | 
<label>Email address</label> 
<input type-"email" class="form-control" placeholder="Enter email"> 
</div> 


<div class="form-group"> 
<label>Message</label> 
<textarea class="form-control"></textarea> 
</div> 
«button type="submit" class="btn bin-primary">Submit</button> | 
</form> | 
</div> | 
<div class="col-md-4"> | 
<div class="block block-primary-head no-pad"> 
<h3><i class="fa fa-home"></i> Our Location</h3> 
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<div class="block-content"> 
<ul class="list-location"> 
<li><h4>SKYAPP. ine</h4></li><hi> 
| <li>44 Main Street</li> 
&Y | <li>Boston MA, 01922</li> 
ow | <li>Phone: 555-555-5555</li> 


| i>Fax: 666-666-6666</li> 
"s 

| </div> 

</div> 

</div> 
</div> 
</div> 

</section> 


执行 代码 ， 生 成 效果 如 图 9.28 所 示 。 





图 9.28 Contact.html 完成 效果 


9.7 ”用 媒体 查询 进行 移动 端 优化 设计 


最 后 ， 添 加 一 些 移动 端 优化 的 代码 : 
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@media(max-width:768px) ( 
.search( 
display-inline-block: 
text-align:center: 


) | & 
devicel 


display:block: | 
margin:20px auto 0 auto; | 
} 


.device-small { 
margin-bottom:20px important: 


margin-bottom:20px: 
text-align:center: 


h4{ 
text-align:center; 


至 此 , 看 一 下 最 终 的 项 目 文件 , 完成 了 第 一 个 响应 式 的 Web 前 端的 项 目 ， 可 以 准备 进 | 
入 下 面 的 案例 学 习 。 | 


本 章 总 结 


本 章 讲解 了 一 个 完整 的 企业 官网 的 前 端 开发 流程 ， 并 带领 读者 用 CSS 预 处 理 语言 | 
SASS 编译 SCSS 文件 ， 理 论 与 实战 结合 ， 读 者 可 反复 练习 本 章 案例 ， 直 至 知道 每 一 个 项 ， 
目 文件 及 交互 效果 如 何 实现 , 以 及 为 什么 会 实现 , 为 今后 成 为 职业 的 Web 前 端 开 发 工程 师 ， 
打下 坚实 的 基础 。 | 


Re fe sb 
完成 如 图 9.29 所 示 案 例 。 
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HTML5 前 请 开发 
ò. a 
oe 
bootstrap 4S PHI 
Bootstrap 一 — 
ms s= — 


最 新 课程 
Eos Sos pos gos 
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图 9.29 在 线 课堂 首页 效果 图 
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在 第 9 章 中 展示 了 Bootstrap FA Web 前 端 页 面 的 强大 功能 .Bootstrap 有 丰富 的 组 件 、 
插件 和 主题 模板 ， 非 常 适合 做 网 站 的 后 台 管理 系统 界面 。 目 前 行业 中 很 多 网 站 项 目的 后 台 
都 是 应 用 Bootstrap 快速 搭建 的 。 本 章 将 结合 一 个 企业 网 站 的 后 台 管 理 系统 页 面 ， 帮 助 读 





> RR Bootstrap 框架 。 
> 学习 如 何 搭建 后 台 管 理 系统 。 


> ”如何 搭建 网 站 后 台 管理 系统 ? 
> 网 站 后 台 系统 主 要 包含 哪 几 个 主要 页 面 ? 
> 为 什么 应 用 Bootstrap 搭建 网 站 后 台 系 统 ? 


uu 
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10.1 项 8 开始 


EL 
”开发 一 个 项 目 ， 首 先 需 要 确定 需求 。 网 站 后 台 管理 包含 很 多 方面 ， 如 用 户 管理 、 内 容 
MOTD 管理、 数据 统计 等 ， 限 于 篇 幅 ， 这 里 选择 具有 典型 性 的 内 容 管理 作为 示例 。 
| 网 站 后 台 界面 设计 相对 于 前 端 设计 来 说 要 更 简约 、 易 用 性 更 强 、 细 节 设计 更 规范 ， 设 
| 计 后 台 界面 之 前 一 定 要 对 产品 功能 有 深入 的 理解 才能 让 产品 有 更 好 的 易 用 性 与 视觉 体验 。 
| 内容 管 理 页 面 ， 核 心 功能 就 是 可 以 方便 地 查看 文章 内 容 ， 并 可 以 对 文章 进行 编辑 /删除 / 
| 置顶 操作 ， 此 外 ， 网 站 后 台 管 理 系统 还 有 很 多 其 他 功能 模块 ， 还 需要 有 清晰 的 链接 结构 ， 
| 方便 向 其 他 模块 跳 转 。 
| 明确 了 需求 以 后 ， 就 可 以 开始 进行 页 面 布局 的 设计 。 本 系统 基本 的 设计 思路 如 图 10.1 
所 示 ， 这 里 为 了 更 好 地 说 明 ， 使 用 了 整 页 完成 后 的 截图 。 
| 由 图 10.1 可 以 看 出 ， 这 个 页 面 主要 包括 3 个 功能 模块 。 
E ”首部 导航 栏 : 包括 后 台 首页 、 用 户 管理 、 内 容 管理 、 标 签 管理 这 4 个 主要 模块 的 
链接 ， 以 及 管理 员 登 录 信息 、 退 出 等 通用 功能 。 
回 ” 左 侧 边栏 ， 内 容 管理 分 类 下 的 功能 导航 ， 包 括 内 容 管理 和 添加 内 容 的 导航 链接 。 
回 “ 主 功能 部 分 ， 查看 文章 内 容 ， 并 进行 编辑 /删除 /置顶 操作 。 
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图 10.1 后 台 管理 系统 的 完成 图 
102 页 面 布 局 


页 面 的 制作 一 般 是 先 有 轮廓 再 到 细节 ， 因 此 页 面 布局 是 先 引入 类 库 再 进行 设计 。 
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10.2.1 引入 Bootstrap 3 框架 


既然 使 用 Bootstrap, 就 必须 先 引入 。 为 了 方便 , 这 里 使 用 Bootstrap 中 文风 提供 的 CDN 
链接 引入 Bootstrap 3， 使 用 百度 CDN 引入 jQuery。 一 些 需要 自 定义 的 CSS 样式 则 放 在 ay) 


main.css 文件 中 。 
引入 后 代码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 

<title> 网 站 后 台 管理 系统 </title> 
<scriptsre="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> 

<scriptsrc="http://cdn. bootess.comy/twitter-bootstrap/3.0.2/js/bootstrap.js"></script> 

<link href-"http://cdn.bootcss.com/twitter-bootstrap/3.0.2/css/bootstrap.css" rel="stylesheet"> 
<link href="main.css" rel="stylesheet"> 

</head> 





这 里 考虑 到 该 系统 可 能 在 移动 设备 上 使 用 ， 再 加 上 Bootstrap 3 默认 采用 响应 式 设计 ， | 
因此 需要 在 头 部 添加 viewport 的 meta 标签 。 此 外 ， 为 了 防止 在 某 些 没有 指定 编码 的 浏览 | 
器 下 出 现 乱 码 ， 需 要 添加 meta 标签 来 指定 charset-UTF-8. | 

添加 后 代码 如 下 : 

<!DOCTYPE html> 

<html> 

<head> 

<meta http-equiv="content-type" content-"text/html: charset=UTF-8" /> 

«meta name-"viewport" content-"width-device-width, initial-scale=1.0" /> 
<title> 网 站 后 台 管理 系统 </title> 
<scriptsre="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> 

<script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.2/js/bootstrap.js"></script> 
<link href="http://cdn.bootess.com/twitter-bootstrap/3.0.2/css/bootstrap.css" rel="stylesheet"> 
<link href-"main.css" rel="stylesheet"> 

</head> 


10.2.2 ”编写 布局 代码 


编写 布局 代码 ， 页 头 采用 nav tee, EA AMZ HE Bootstrap 默认 的 container 容器 | 
内 部 。 在 container 内 部 ， 则 分 为 左 侧 边 栏 和 右 侧 的 主 功能 部 分 ， 这 里 笔者 采用 的 比例 是 ， 
1:5, 8012 列 栅 格 中 ， 左 侧 占 两 列 ， 右 侧 占 10 列 。 而 在 小 屏幕 设备 下 ， 则 采用 堆 稚 放置 。 
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编写 布局 代码 如 下 : 


<!DOCTYPE html> 
<html> 


/ | <head> 
EY) | <meta http-equiv-"content-type" content-"text/html: charset-UTF-8" /> 


j «meta name="viewport" content-"width-device-width, initial-scale=1.0" /> 
<tite> 网 站 后 台 管 理 系 统 <ite> 
| <script sre="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> 
<script sre="http://cdn.bootess.com/twitter-bootstrap/3.0.2/js/bootstrap.js"></script> 
<link href="http://cdn.bootess.com/twitter-bootstrap/3.0.2/css/bootstrap.css" rel="stylesheet"> 
<link href="main.css" rel="stylesheet"> 
</head> 
<body> 
<!-- 页 头 --> 
<div class="header"> 
<nav> 
</nav> 
</div> 
<div class="container"> 
<div class="row"> 
<!-- 左 侧目 录 --> 
<div class="col-xs-12 col-sm-2 col-md-2 col-lg-2"> 
</div> 
<!-- 右 侧 主要 内 容 --> 


«div class="col-xs-12 col-sm-10 col-md-10 col-lg-10"> 


10.3 ”实现 导航 栏 


| 在 需求 明确 、 设 计 和 布局 完成 后 ， 就 可 以 进行 细节 的 施工 ， 首 先 需要 实现 页 面 的 头 部 
导航 功能 。 

| 本 例 中 的 头 部 导航 主要 包括 标题 、 主 要 功能 模块 的 链接 、 搜 索 框 、 通 知 、 登 录 信 息 5 
| 个 部 分 ， 主 要 采用 Bootstrap 中 内 置 的 头 部 导航 组 件 来 实现 。 


| 10.3.1 ”构建 导航 的 框架 代码 


根据 之 前 介绍 过 的 Bootstrap 头 部 导航 可 以 进行 如 下 设置 : 


«nav class="navbar navbar-default " role="navigation"> 
<div class="container"> 
<div class="navbar-header"> 
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<!-- 这 里 设置 标题 -> 

</div> 

<div class="collapse navbar-collapse"> 
<ul class="nav navbar-nav"> 


< 这 里 设置 导航 链接 -> | & 
</ul> Ma 
<ul class="nav navbar-nav navbar-right"> | Note 
<!-- 这 里 设置 搜索 、 通 知 、 登 录 信息 -> eA: 
</ul> | 
</div> | 
</div> 
</div> 
</nav> 


10.3.2 ”填写 标题 和 导航 链接 


标题 的 设置 需要 在 <div class-"navbar-header">...</div> 内 添加 标题 链接 ,要 为 该 链接 添 、 
加 .navbar-brand 类 。 | 

导航 链接 只 要 在 <ul class="nav navbar-nav">...</ul> 内 添加 列表 项 即 可 ， 用 .active 类 表 | 
示 当 前 所 处 的 功能 模块 。 | 


<nav class="navbar navbar-default "> 
<div class="container"> 
<div class="navbar-header"> 
<a href="#" class="navbar-brand"> 后 台 管 理 系统 </a> 
</div> 
<div class="collapse navbar-collapse"> 
«ul class="nav navbar-nav"> 
<li><a hre 伍 "#"> 后 台 首 页 </a></li> 
<li><a hre 伍 "#"> 用 户 管理 </a></li> 
<li class="active"><a hre 仁 "#"> 内 容 管理 </a></li> 
«ful 
<ul class="nav navbar-nav navbar-right"> 
<!-- 这 里 设置 管理 员 信息 、 退 出 按钮 -> 
«ful 
</div> 








后 台 首 页 APER 内容 管理 
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10.3.3 添加 管理 员 和 退出 系统 按钮 


对 于 用 户 管理 ， 需 要 为 其 外 层 的 元 素 添加 . dropdown 类 ， 为 了 美观 ， 这 里 没有 显示 | 
用 户 管理 功能 选项 ， 而 将 用 户 管理 功能 选项 设 为 了 隐藏 ， 通 过 单 击 显示 。 | 
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<nav class="navbar navbar-default"> 
<div class="container"> 
<div class="navbar-header"> 
<a href="#" class="navbar-brand"> 后 台 管理 系统 </a> 


<div class="collapse navbar-collapse"> 


| <ul class="nav navbar-nav"> 
<li><a hre 人 ="#'> 后 台 首 页 </a></li> 


<li><a hre 伍 "#> 用 户 管理 </a></li> 

<li class="active"><a hre 人 ="#"> 内 容 管理 </a></li> 
«ful» 
<ul class="nav navbar-nav navbar-right"> 

<li><a href="#">admin</a></li> 

<li><a href="#">iB t</a></li> 





admin 





| 图 10.3 添加 了 右 侧 功能 导航 
(10.3.4 “添加 管理 员 登 录 信息 


| 如 果 管理 员 未 登录 , 这 里 应 当 显示 登录 的 链接 (对 于 后 台 管 理 , 一 般 是 不 开放 注册 的 ); 
| 如果 管理 员 已 经 登录 ， 这 里 应 当 显示 管理 员 的 用 户 名 ， 并 提供 下 拉 菜 单 ， 菜 单项 涉及 查看 
前 台 页 面 及 设置 该 管理 员 的 相关 操作 选项 ， 以 及 收藏 选项 等 。 

| 此 处 用 到 了 Bootstrap 内 置 的 下 拉 菜单 组 件 : 


«nav class="navbar navbar-default "> 
<div class="container"> 
<div class="navbar-header"> 
<a href="#" class="navbar-brand"> 后 台 管理 系统 </a> 
</div> 
<div class="collapse navbar-collapse"> 
<ul class="nav navbar-nav"> 
<li><a href="#"> fa & Bi Vi </a></li> 
<li><a hre 仁 "#"> 用 户 管理 </a></li> 
<li class="active"><a hre 仁 "#"> 内 容 管理 </a></li> 
<h> 
<ul class="nav navbar-nav navbar-right"> 
<li class="dropdown"> 
| <a id-"dLabel" type-"button" data-toggle="dropdown" aria-haspopup-"true" aria- 
| expanded="false"> 
| admin 
<span class="caret"></span> 
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</a> 

<ul class="dropdown-menu" aria-labelledby="dLabel"> 
<li><a href="#">l & Ñ Vial 
<li><a hre 伍 "#"> 个 人 主页 </a></li> | 
<li><a href="#"> A EB a7] | EF) 
<li><a href="#"> IK P Puls</a></li> poe 


EA E 


«fi» 
<li><a href="#">iB H</a></li> 
<ul> 
</div> 
</div> 
</nav> 


这 一 步 完成 后 , 一 个 完整 的 论坛 管理 系统 的 头 部 导航 的 前 端 部 分 就 基本 完成 了 , 如 图 10.4 | 
所 示 ， 表 单 提交 后 的 处 理 、 用 户 登 录 的 判断 则 交 由 后 台 程 序 来 处 理 。 | 





图 10.4 完整 的 头 部 导航 


10.3.5 “为 导航 添加 图 标 并 设置 响应 式 导 航 


为 导航 添加 图 标 以 构建 更 好 的 视觉 效果 ， 如 果 想 让 导航 在 小 屏幕 上 实现 展开 和 收 起 ， 
还 要 进一步 完成 响应 式 的 设计 。 | 

在 <div class="navbar-header">...</div> 内 添加 一 个 指定 样式 的 按钮 ， HEENA 
开 和 收 起 ， 需 要 为 该 按钮 添加 data-toggle="collapse" 触 发 器 和 data-taget 属性 的 值 对 应 ， 
id="set", Jl] data-target="#set"。 


注意 : 按钮 的 样式 可 以 自己 控制 ， 但 是 data-toggle="collapse" 这 个 触发 器 和 data-target we 
都 是 必需 的 。 | 


完整 的 代码 如 下 : 


<nav class="navbar navbar-default"> 
<div class="container"> 
«div class="navbar-header"> 
<button class-"navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
<span class="st-only">Toggle navigation</span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
</button> 
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<a href=+"#" class="navbar-brand"> 后 台 管 理 系统 </a> 
</div> 
<div class="collapse navbar-collapse"> 
<ul class="nav navbar-nav"> 
<li><a href="#"><span class="glyphicon glyphicon-home"></span> 后 台 首 页 </a></li> 
<li><a href="#"><span class="glyphicon glyphicon-user"></span> 用 户 管理 </a></li> 
<li class="active"><a href="#"><span class="glyphicon glyphicon-list-alt"></span> 内 容 管理 </a> 





<ul> 

<ul class="nav navbar-nav navbar-right"> 
| <li class="dropdown"> 
| <a id="dLabel" type="button" data-toggle="dropdown" aria "true" aria-expanded= 
| "false" 
| admin 
| <span class="caret"></span> 
| </a> 
<ul class="dropdown-menu" aria-labelledby="dLabel"> 
| <li><a href="#"><span class="glyphicon glyphicon-screenshot"></span> 前 台 首页 </a></li> 
| <li><a href="#"><span class="glyphicon glyphicon-user"></span> 个 人 主页 </a></li> 
| <li><a href="#"><span class="glyphicon glyphicon-cog"></span> 个 人 设置 </a></li> 
| <li><a href="#"><span class="glyphicon glyphicon-credit-card"></span> 账 户 中心 </a></li> 
| <li><a href="#"><span class="glyphicon glyphicon-heart"></span> 我 的 收藏 </a></li> 
| </ul> 
| «li» 
<li><a href+"#"><span class="glyphicon glyphicon-off"></span>i th </a></li> 





图 10.5 导航 未 展开 时 的 样式 





后 台 管 理 系统 
ft 后 台 首 页 
4 用 户 管理 
Bassum 


admin ~ 


O 退出 








图 10.6 导航 展开 后 的 样式 
这 样 ， 一 个 功能 完整 并 附带 响应 式 的 头 部 导航 就 完成 了 。 
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104 实现 左 侧 边 栏 


| Ae 
导航 完成 后 ， 根 据 从 上 到 下 、 从 左 到 右 的 顺序 开始 实现 左 侧 边栏 的 功能 ， 左 侧 边栏 主 ， 
要 是 一 个 大 的 功能 模块 列表 ， 本 质 上 就 是 一 组 链接 ， 这 里 可 以 选择 Bootstrap (THE SAL, 
也 可 以 选择 列表 组 。 | 
笔者 选择 使 用 列表 组 进行 实现 ， 代 码 如 下 ， 


<div class="container"> 
«div class="row"> 
<!-- 这 里 设置 标题 -> 
<!-- 左 侧目 录 --> 
<div class="col-xs-12 col-sm-2 col-md-2 col-1g-2"> 
<div class="list-group"> 
<a href="#" class="list-group-item active"> 内 容 管理 </a> 
<a href="#" class="list-group-item"> 添 加 内 容 </a> 
</div> 
</div> 
<!-- 右 侧 主要 内 容 --> 


admn > 退出 





图 10.7 左 侧 边栏 部 分 
10.5 ”实现 主 功能 部 分 


完成 了 头 部 导航 和 左 侧 边栏 的 工作 之 后 ， 就 该 进行 主 功能 展示 部 分 的 开发 了 。 一 般 来 
说 ， 一 个 后 台 管 理 系统 包括 审核 、 管 理 、 日 志 等 多 个 模块 ， 这 里 限于 篇 幅 无 法 一 一 讲 到 ， | 
笔者 以 主 帖 审核 功能 页 面 作为 样 例 展 开讲 解 。 


10.5.1 主 功能 的 头 部 


按 从 上 到 下 的 原则 ， 本 小 节 先 来 制作 主 功能 的 头 部 。 
COD 为 了 让 页 面 区 域 的 划分 更 为 清晰 ， 笔 者 将 主 功能 部 分 包 衷 在 一 个 面板 中 。 基 本 | 
代码 如 下 : | 
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«div class="col-xs-12 col-sm-10 col-md-10 col-lg-10"> 
«div class="panel panel-default"> 


QW) 
s 


| E class="panel-heading"> 
ay) <!- 这 里 放置 标题 、 选 项 -> 
| </div> 
Note pa class="panel-body"> 


<! 一 n 这 里 文章 列表 -> 


</div> 
</div> 
</div> 
| 根据 功能 划分 ， 笔 者 将 标题 、 选 项 、 分 页 等 内 容 放 在 面板 的 头 部 ， 将 帖子 列表 放 在 面 
， 板 的 内 容 部 分 。 


(2) 向 面板 头 部 填充 预定 内 容 。 


<div class="col-xs-12 col-sm-10 col-md-10 col-lg-10"> 
<div class="panel panel-default"> 
<div class="panel-heading"> 
<hl> 内 容 管 理 </hl> 
<ul class="nav nav-tabs"> 
<li class="active"> 
| «a hre 仁 "#"> 内 容 管理 </a> 
| </li> 
<li> 
<a hre 仁 "#"> 添 加 内 容 </a> 
</li> 
</ul> 
</div> 
<div class="panel-body"> 
<! 一 n 这 里 文章 列表 --> 
</div> 
</div> 
</div> 
首先 是 一 个 标题 ， 表 明 该 页 的 主要 功能 是 “内 容 管 理 ”。 
| 对 于 内 容 管理 页 面 ， 有 添加 、 编 辑 、 删 除 3 个 选项 ， 添 加 文章 是 内 容 管理 最 常用 的 一 
E 因而 将 “添加 内 容 ” 选 项 设置 为 一 个 独立 页 面 。 
| 效果 如 图 10.8 所 示 。 


ASSET 。 旦 用 广 管理 BARES 


AGES 


— 内 容 管理 


AGES acd 





图 10.8 添加 面板 头 部 的 效果 
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10.52 ”内 容 管理 的 文章 列表 
头 部 完成 后 ， 开 始 制作 帖子 列表 部 分 ， 列 表 每 一 行 需要 显示 文章 的 主题 、 发 帖 时 间 、 





作者 、 详 情 等 信息 ， 显 然 这 里 使 用 表格 是 最 合适 的 选择 。 i RA 
根据 这 些 需求 ， 在 面板 内 容 部 分 加 入 如 下 代码 : 


<div class="panel-body"> | 
<table class="table"> i 
<thead> 
<tr> 
< 由 > 文章 标题 </th> 
<th> 作 者 </th> 
<th> 发 布 时 间 </th> 
<th> 操 作 </th> 
«hr 
</thead> 
<tbody> 


<tr> 
«th scope="row"> 国 内 首 个 汽车 资讯 互动 平台 诞生 </thb> 
<td> 李 晓 乐 </td> 
<td>2017/01/20</td> 
<td> 
<div role="presentation" class="dropdown"> | 
<button class-"btn btn-default dropdown-toggle" data-toggle-"dropdown" | 
href="#" role="button" aria-haspopup="true" aria-expanded="false"> | 
操作 <span class="caret"></span> 
</button> 
<ul class="dropdown-menu"> 
<li><a href=+"#">4a4#t</a></li> 
<li><a hre 伍 "六 > 删除 </a></li> 
<li><a hre 仁 "#"> 全 局 置顶 </a></li> 
</ul> 


«th scope="tow">32 45 & 10 亿 元 资金 成 立 创 投 联盟 </th> 
<td> 李 晓 乐 </td> 
<td>2017/01/20</td> 
<td> 
<div role="presentation" class="dropdown"> | 
<button class="btn  btn-default dropdown-toggle" data-toggle="dropdown" | 
href="#" role="button" aria-haspopup="true" aria-expanded="false"> H 
操作 <span class="caret"></span> 
</button> 
<ul class="dropdown-menu"> 
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<li><a hre 仁 "#> 编 辑 </a></li> 
<li><a href="##> 删 除 </a></li> 
<li><a hre 仁 "#"> 全 局 置顶 </a></li> 
</ul> 
zu «jdiv» 
</td> 
Note </> 
</tbody> 
</table> 
</div> 
这 样 文章 列表 部 分 就 完成 了 ， 如 图 10.9 所 示 。 
| aspera Brun admin ~ 退出 
= 内 容 管理 
UEM BWE 

文章 标题 作者 ant E 

Biss eR ST AEE uf 2017/01/20 iHe 

RAZ CAAR ORE Fie 2017/01/20 rr 

胸怀 网 络 世界 、 强 健 凡 放 中 国 、 建 立 有 序 字 问 FHR 2017/01/20 ther 

BREST AEA se 2017/01/20 fit 

CIS PLUR A et ONE due 2017/0120 Bt. 

TRO SECO TET Jai 2017/01/20 操作 ~ 

IN: 育 正 决定 人 生 高 度 的 ， 是 你 象 事 的 妹 度 Pi 2017/01/20 ize 








109 文章 列表 页 面 


这 里 还 有 一 个 问题 是 如 果 有 很 多 文章 ， 让 文章 列表 全 部 显示 在 一 个 页 面 上 显然 不 合 
， 这 里 需要 用 到 Bootstrap 的 分 页 插件 。 在 <table> 标 签 之 下 添加 如 下 代码 : 


<nav class="pull-right"> 

<ul class="pagination"> 
<li class="disabled"> 
<a href="#" aria-label="Previous"> 
<span aria-hidden="true">&laquo:</span> 
</a> 
</li> 
<li class="active"> 
<a href="#">1</a> 
</i> 
<li><a href="#">2 </a></li> 
<li><a href="#">3 </a></li> 
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<li><a href="#">4 </a></li> 
<li><a href="#">5 </a></li> 
<li><a href="#">6 </a></li> | 
<li><a href="#"><span aria-hidden="true">&raquo;</span></a></li> | 2 
m | EL 
</nav> i 


效果 如 图 1010 所 未。 


I ARAETA LIPE BASE admin if 








RAE TEAR GU. 


爱 商 艺 10 亿 元 资金 成 了 7 创 投 联盟 


RHEE. ROUTER, RTARTA 











BAT: RATHER RE "m 
SAMA A ER BELAY si 
ATARI due si 
duel: 自 正 决定 人 生 高 和 的， 是 你 全 事 的 直 度 mek ozon 








图 10.10 添加 分 页 的 文章 列表 页 面 
最 后 添加 页 面 底 部 ， 代 码 如 下 : 


<footer> 
<div class="container"> 
«div class="row"> 
<div class="col-md-12"> 
<p>Copyright 2016-2017 www.newsmile.com 京 ICP 备 11427030 号 -9 </p> 
</div> 
</div> 
</div> 
</footer> 
在 main.css 添加 自 定义 的 样式 ， 完 成 效果 如 图 10.11 (a) Bras. 
至 此 ， 一 个 网 站 后 台 的 文章 列表 页 面部 分 就 完成 了 。 | 
虽然 对 于 后 台 管 理 这 样 的 工作 来 说 ， 一 般 都 是 在 PC 上 完成 ， 但 仍然 可 以 做 一 些 响应 ， 
式 处 理 ， 在 小 屏幕 下 的 效果 如 图 10.11 (b) 所 示 。 这 样 做 一 方面 应 用 框架 本 身 的 特性 ， 另 | 
一 方面 也 方便 后 台 管 理 人 员 处 理 突 发 的 情况 。 | 
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(a) 普通 页 面 效 果 








内 容 管理 BAE 


文章 标题 作者 zena it 

Birgit ZERO 2017/01/20 (|. 
BASLE SER 2017/01/20 | a. 
胸怀 网 络 世 界 、 强 键 开放 中 国 、 建 立 有 序 空间 SMF 2017/01/20 | i. 
首 个 网 络 空间 安全 战略 乞 定 网 络 强国 基石 SER 2017/0100 | ju. 
美 描 吉 措 实现 6 人 连 胡 移动 社交 再 升级 SRR 2017/01/20 | gepe 
Errante T SRR 2017/01/20 | gepe 


HAA : BUERTATRUERD, ARERR SEF 2017/01/70 | gare, 


^ 





O 小 屏幕 下 的 显示 效果 
图 10.11 后 台 页 面 完成 的 效果 
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本 章 演示 了 如 何 从 零 开始 应 用 Bootstrap 3 框架 完成 论坛 后 台 管 理 页 面 构建 的 过 程 , O re 


括 头 部 导航 、 侧 边栏 、 主 体内 容 3 大 部 分 ， 应 用 到 了 Bootstrap 中 的 按钮 、 标 签 、 表 格 、 ， 
表单 等 基础 样式 ， 列 表 组 、 面 板 、 头 部 导航 、 分 页 、 徽 章 等 样式 组 件 ， 以 及 头 部 响应 式 导 
航 、 折 又 、 下 拉 菜单 等 jQuery 组 件 。 | 

读者 从 该 样 例 中 可 以 发 现 ， 相 比 传统 的 手工 编写 CSS, JavaScript 代码 的 项 目 ， 这 个 ， 
例子 笔者 没有 自己 编写 一 行 CSS 和 JavaScript 代码 ,完全 应 用 Bootstrap 就 搭建 了 一 个 相当 
美观 的 后 台 管理 界面 。 对 于 像 后 台 管 理 这 类 功能 性 强 ， 个 性 化 要 求 不 高 的 项 目 来 说 ， 此 做 
法 非常 合适 ， 可 以 把 更 多 精力 放 在 业务 逻辑 而 非 细节 调整 上 。 | 

当然 由 于 有 大 量 的 主题 模板 (业内 称 皮肤 ) 支持 ， 再 加 上 可 以 较 方便 地 定制 ， 即 使 做 
一 些 需 要 个 性 化 的 页 面 ，Bootstrap 也 可 以 胜任 ， 只 是 需要 做 更 多 的 工作 罢了 。 | 


本 章 sb 


完成 如 图 10.12 和 图 10.13 所 示 的 后 台 页 面 。 
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图 10.12 企业 网 站 后 台 页 面 1 
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图 10.13 企业 网 站 后 台 页 面 2 
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使 用 Bootstrap 实现 电 商 网 站 





本 章 主 要 进行 电子 商务 网 站 的 开发 ， 除 了 要 将 当前 已 掌握 的 Bootstrap 项 目 知 识 更 进 
一 步 应 用 于 本 章 项 目 中 ， 读 者 还 要 熟悉 电子 商务 网 站 的 开发 流程 。 

在 本 项 目 开 始 之 后 ， 将 逐步 增加 难度 ， 以 便 读者 能 够 理解 并 掌握 。 在 开发 中 ， 首 先 会 
开发 ecommerece.html 页 面 ， 然 后 创建 category.html、buy.html、product.html 几 个 页 面 最 
后 实现 一 个 响应 式 的 电 商 网 站 。 








> FR Bootstrap 框架 。 
> 掌握 电子 商务 网 站 开发 流程 。 























> ”如何 搭建 电 商 网 站 ? 
> 电 商 网 站 主要 包含 哪 几 个 主要 页 面 ? 
> 为 什么 应 用 Bootstrap 搭建 电 商 网 站 ? 
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| 11.1 ite 4 * W index.html 
& 


创建 4 个 HTML 页 面 , 分 别 命名 为 index.html, buy.html, category.html 和 product.html, 
Note | 分 别 代表 电 商 网 站 首页 、 产 品目 录 、 购 买 页 及 商品 详情 页 。 首 先 实现 index.html 页 面 。 
| 完成 效果 如 图 11.1 所 示 。 
| 
所 有 商品 分 类 











Mos 








| 图 11.1 电 商 首页 完成 效果 图 
| 11.1.1. 搭建 Bootstrap 框架 


现在 开始 第 一 步 ， 在 index.html 文件 中 编写 以 下 代码 。 


<!DOCTYPE html> 
<html> 
<head> 

<meta charset="utf-8"> 


<meta name="viewport" content-"width-device-width, initial-scale=1"> 
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«title» Bootstrap Store</title> 

<!-- 引入 Bootstrap CSS --> 

<link href-"css/bootstrap.css" rel="stylesheet"> 
<!-- 自 定义 CSS — 

<link href="style.css" rel="stylesheet"> 

<!-- 使 IE8 支持 h5 标签 和 媒体 查询 -> 


<!--[if It IE 9] EZA 
<script src="https://oss.maxcdn.com/libs/htmlSshiv/3.7.0/html5shiv.js"></script> 


<script src="https://0ss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> 
<![endif]--> 

</head> 

<body> 

<!-- jQuery Version 1.11.0 --> 

<script src="js/jquery-1.11.1.js"></script> 

<!-- 引入 Bootstrap js 插件 — 

<script src="js/bootstrap.js"></script> 

</body> 

</html> 

在 此 , 将 respond.minjs、jQuery 文件 、HTML shiv 和 Bootstrap 框架 一 起 引入 到 当前 文件 中 。 


注意 : 一 些 CSS3 特性 和 HTMLS 元 素 并 不 能 被 IE8 以 下 的 浏览 器 识别 。 因 此 ，IE8 需要 用 
htmlSshiv 来 正确 显示 这 些 元 素 并 且 响 应 js 及 可 以 进行 媒体 查询 。 


11.1.2 为 商城 创建 导航 菜单 


与 第 10.3 节 创建 导航 类 似 ， 需 要 在 <body> 标 签 中 定义 导航 。 用 类 名 为 .navbar-inverse | 
的 样式 ， 做 出 黑色 背景 白色 文字 的 导航 ， 如 图 112 所 示 。 | 


图 11.2 导航 








源 代码 如 下 : 


<!-- Navigation --> 

«nav class-"navbar-inverse" role="navigation"> 
«div class="container-fluid"> 
<!-- Brand and toggle get grouped for better mobile display --> 
<div class="navbar-header"> 
<button type="button" class="navbar-toggle collapsed" data- 
toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
<span class="sr-only">Toggle navigation</span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
</button> 
<a class="navbar-brand" href="ecommerce.html">Bootstrap Store</a> 
</div> 
<!-- 导 航 链接 及 内 容 切 换 --> 
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<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"></div> 
<!-- /.navbar-collapse --> 
</div><!-- /.container-fluid --> 

</nav> 


AR 11.1.3， 向 导航 添加 目录 和 导航 链接 


定义 Categories 链接 向 其 他 页 面 的 导航 链接 。 在 注释 <!-- 导 航 链接 及 内 容 切 换 --> 下 面 
| 的 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">...</div>Z [E], @ 
， 建 一 个 样式 为 Categories 的 商品 类 目录 ， 然 后 为 这 个 .Categories 链接 添加 下 拉 菜单 ， 这 样 
| 可 以 添加 各 种 产品 分 类 ， 如 产品 、 电 器 、 鞋 。 
”参见 下 面 的 代码 并 仔细 分 析 理 解 : 


<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
<ul class="nav navbar-nav"> 
<li class="dropdown"> 
<a href="#" class-"active dropdown-toggle" data-toggle="dropdown"> 
所 有 商品 分 类 
<span class="caret"></span> 
</a> 
| <ul class-"dropdown-menu" role="menu"> 
| <li><a href="category.html">R4 — &amp: 饰品 </a></li> 
| <li><a href="category.html"> 8E Ff] à </a></li> 
| <li><a hre 人 "categoryhtml"> 美 容 &amp: 保健 </a></li> 
<li><a hre 人 "categoryhtml"> 电 子 产 品 </a></li> 
<li><a href-"category.html" X F</a></li> 
<li><a hre 全 "categoryhtml"> 家 居 &amp; 园艺 </a></li> 
<li><a href="category.html">#fi </a></li> 
<li><a href="category.html">##</a></li> 
<li><a href="category.html">{4# &amp: 娱乐 </a></li> 
<li><a hre 仁 "category.html"> 手 表 </a></li> 
<li class="divider"></li> 
<li><a href="ecommerce.html"> 所 有 商品 分 类 </a></li> 
</ul> 
</li> 
<li><a href="#">Link</a></li> 
<li><a href="#">Link</a></li> 
</ul> 
</div><!-- /navbar-collapse --> 


这 样 便 定义 了 Categories 菜单 和 下 拉 菜 单 ， 生 成 效果 如 图 11.3 所 示 。 
| 接 下 来 , 添加 注册 链接 、 用 户 中心 链 接 和 购物 车 图 标 , 在 导航 条 的 右 侧 调用 Glyphicons 
| 主题， 注意 代码 需要 添加 在 </div><!-- /navbarcollapse> 元 素 结束 之 前 。 
| <ul class="nav navbar-nav navbar-right"> 
<li> 
<a href="#"> 
<span class="badge pull-right">4</span> 
<i class="glyphicon glyphicon-shopping-cart"></i> 
</a> 
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<li> | 
<a href="account.html"> | 
<i class="glyphicon glyphicon-user"></i> | 
</a> 
</li> | 
<li> 
<a href="#" data-toggle-"modal" data-target="#myModal"> 登 录 </a> 
</li> | 


«ful» | 
生成 的 效果 如 图 11.4 所 示 。 


所 有 而 旺 分 类 ~ 
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1L3 带 下 拉 菜 单 的 导航 | 


图 11.4 添加 登录 及 购物 车 的 导航 


对 于 登录 部 分 ， 将 创建 一 个 显示 单 击 登 录 的 链接 模块 。 下 面 的 代码 需要 添加 在 </nav> 
标签 结束 后 。 


<!-- Modal --> | 
<div class="modal fade" id-"myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 
aria-hidden="true"> 
<div class="modal-dialog"> | 
<div class="modal-content"> | 
<div class="modal-header"> 
<button type="button" class="close" data-dismiss="modal"> 
<span aria-hidden="true">&times:</span> | 
<span class="sr-only"> 关 闭 </span> 
</button> 
<h2 class-"modal-title" id="myModalLabel"> 登 录 </h2> 
</div> | 
<div class="modal-body"> 
<form class="form-signin" role="form"> 
<h3 class="form-signin-heading"> 电 子 邮 箱 登 录 </h3> i 
<div class="form-group"> 
<input type="email" class="form-control" placeholder-" i F 
邮箱 " required autofocus> 
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</div> 
<div class="form-group"> 
<input type="password" class-"form-control" placeholder=" 密 码 " required 


2| </div> 
EX | | <div class="checkbox"> 
—— | <label> 
<input type="checkbox" value="remember-me"> 记 住 用 户 名 
| «label 
| </div> 
<button class="btn btn-lg btn-primary btn-block" type="submit"> 登 录 </button><br> 
</form> 
</div> 
</div> 
</div> 
</div> 


生成 效果 如 图 11.5 所 示 。 





电子 邮箱 登录 


| 电子 和 





图 11.5 弹出 登录 注册 模块 
从 前 面 的 代码 及 输出 结果 看 ， 已 经 通过 代码 实现 了 弹出 的 交互 表单 。 


| 11.1.4. AHA Banner 


| 接 下 来 为 页 面 添加 Banner 代码 块 到 注释 <! 一 主体 页 面 --> 处 ， 为 使 代码 更 易 读 ， 定 义 
| 整 段 代码 以 .container 样式 ， 并 为 它 定义 id 名 为 content。 把 下 面 的 代码 添加 在 div 中 。 
<div id="content" class="container"> 
<div class="row carousel-holder"> 
<div class="col-md-12"> 
<div id="carousel-example-generic" class="carousel slide" 
data-ride="carousel"> 
<ol class="carousel-indicators"> 
<li data-target="#carousel-example-generic" data-slide- 
to="0" class="active"></li> 
<li data-target="#carousel-example-generic" data-slide- 
to="1"></li> 
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<li data-target="#carousel-example-generic" data-slide- | 
to="2"></li> ! 
</ol> 
<div class="carousel-inner"> 
<div class="item active"> 
<img class-"slide-image" src="holder.js/1140x350" alt=" /> 
</div> 
<div class="item"> 
<img class-"slide-image" src-"hholder.js/1140x350" alt=" /> 
</div> | 
<div class="item"> 
<img class-"slide-image" src="holder.js//1140x350" alt=" /> 
</div> 
</div> | 
<a class="left carousel-control" href="#carousel-example- | 





generic" data-slide="prev"> | 
<span class="glyphicon glyphicon-chevron-left"></span> | 
</a> | 
<a class="right carousel-control" href="#carousel-example- 
generic" data-slide="next"> 
<span class="glyphicon glyphicon-chevron-right"></span> 
</a> 
</div> | 
</div> | 
</div> 
</div><!-- /.container--> 


输出 的 代码 效果 如 图 11.6 所 示 。 





图 11.6 添加 Banner 幻灯 片 的 网 页 


11.1.5 添加 产品 目录 


在 Banner 下 添加 产品 目录 ， 使 用 下 面 的 代码 片段 ， 效 果 如 图 11.7 所 示 。 | 


</> | 
<div class="row"> 

<div class="col-sm-4 col-md-3"> | 
<h3>Categories</h3> | 
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<div class="list-group"> 
<a href-"category.html" class="list-group-item">Apparel & Accessories</a> 
<a href-"category.html" class="list-group-item">Baby Products</a> 
<a href-"category.html" class="list-group-item">Beauty & Health</a> 
<a href-"category.html" class="list-group-item">Electronics</a> 
<a href-"category.html" class="list-group-item">Furniture</a> 
<a href-"category.html" class="list-group-item">Home & Garden</a> 
<a href="category.html" class="list-group-item">Luggage & Bags</a> 
<a href-"category.html" class="list-group-item">Shoes</a> 
| <a href="category.html" class="list-group-item">Sports & Entertainment</a> 
| <a href-"category.html" class="list-group-item">Watches</a> 
| </div> 











Categories 














| 图 11.7 添加 侧 边栏 的 效果 
至 此 ， 页 面 雏 形 已 出 来 ， 之 后 添加 网 站 footer 的 代码 。 


11.1.6 “为 网 站 添加 底部 Footer 
定义 网 站 footer 的 <div> 元 素 为 .container 样式 。 代 码 如 下 : 


<div class="container"> 
<hr /> 
<!-- Footer --> 
<footer> 
<div class="row"> 
<div class="col-lg-12"> 
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<p>Copyright &copy: <a href="index.html"> 新 迈 尔 科技 </a> 2017</p> 
</div> 
</div> 
</footer> 
</div> 


生成 效果 如 图 11.8 所 示 。 








图 11.8 SMELT 
11.1.7 ”添加 产品 列表 及 产品 介绍 


产品 目录 的 <div> 标 签 样式 名 为 col-sm-4 col-md-3， 表 示 在 小 屏幕 上 ， 它 距离 左边 有 4 | 
列 宽度 ; 在 PC 屏幕 上 ， 它 距离 左边 有 3 列 宽度 。 既 然 有 12 列 网 格 ， 剩 余 的 部 分 将 被 用 来 | 
显示 产品 列表 。 | 
因此 ， 在 列表 定义 之 后 ， 添 加 下 面 的 代码 : 


<div class="col-sm-8 col-md-9"> 
<div class="row"></div> 
</div> 


在 代码 .row 样式 中 间 插 入 下 面 的 代码 : 


<div class="col-sm-6 col-md-4"> 
<div class="thumbnail"> 

<img src-"holder.js/260x180" alt=""> 

<div class="add-to-cart"> 
<a href="#" class="glyphicon glyphicon-plus-sign" 
data-toggle-"tooltip" data-placement="top" title="Add to cart"></a> 

</div> 

<div class="caption"> 
<h4 class="pull-right">$24.99</h4> 





*159* 


——T7£ ^ Du tre ROGER 
| T 


<h4><a href"product.html">1<sup>st</sup> 商品 </a></h4> 
| <p> 苏 泊 尔 (SUPOR) 电 压力 锅 高 压 锅 CYSB50FCW20QJ-100， 年 终 爆 款 秒 杀价 ， 数 量 
| 有 限 </p> 


E] <div class="ratings"> 
BA | <p class="pull-right"><a href="product.html#comments">15 评论 </a></p> 

| <p> 

<span class="glyphicon glyphicon-star"></span> 
i <span class="glyphicon glyphicon-star"></span> 
| <span class="glyphicon glyphicon-star"></span> 

<span class="glyphicon glyphicon-star"></span> 

<span class="glyphicon glyphicon-star"></span> 

</p> 

</div> 
</div> 
</div> 
</div> 


生成 效果 如 图 11.9 所 示 。 


所 有 商品 分 类 
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图 11.9 添加 产品 项 
复制 这 段 代 码 ， 粘 贴 2 次 ， 生 成 效果 如 图 11.10 所 示 。 
再 把 外 层 的 row 元 素 的 <div> 标 签 复制 一 次 ， 可 以 得 到 如 图 11.11 所 示 的 效果 。 


| 至 此 ， 成 功 构建 了 带 有 链接 、 左 侧 产品 目录 、 右 侧 的 产品 列表 和 底部 的 主体 页 面 ， 通 
”过 定义 幻灯 片 模块 展示 产品 首页 ， 制 作 了 登录 注册 弹出 模块 。 
| 接 下 来 要 创建 的 页 面包 括 buy.html, category html 和 product html. 
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图 11.10 添加 一 行 的 产品 列表 


所 有 商品 分 类 





图 11.11 商城 首 面 最 后 效果 
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11.2 设计 购买 页 面 buy.html 


购买 页 面 的 开始 保留 首页 的 头 部 和 底部 ， 所 以 一 开始 如 图 11.12 所 示 。 





Copyright © 新 迈 尔 科技 2017 





图 11.12 初始 页 面 


| 与 首页 index.html 页 面 类 似 ， 定 义 一 个 页 面 内 容 。 在 modal 模块 后 footer 模块 前 插 
| 入 .container 的 <div> 元 素 ， 现 在 代码 如 下 : 
”< 主体 页 面 -> 


<div id="content" class="container"> 
</div><!--.container --> 


| 创建 row 样式 的 <div> 标 签 ， 在 中 间 插 入 购买 页 菜单 。 创 建 管理 购买 区 并 用 3 列 宽度 
| 来 设置 其 显示 区 域 。 然 后 ， 定 义 系列 列表 并 且 设置 不 同 的 选项 、 命 名 ， 列 表 项 包括 : 所 有 
| 订单、 管理 反馈 、 我 的 优惠 券 、 收 货 地 址 。 代 码 如 下 : 


<div class="row"> 
<div class="col-md-3"> 
<h3 class=""> 管 理 订单 </h3> 
<div class="list-group"> 
<a href="account.html" class="list-group-item"> 所 有 订单 </a> 
<a href-"account.html" class="list-group-item"> 管 理 反馈 </a> 
<a href-"account.html" class="list-group-item"> 我 的 优惠 券 </a> 
<a href-"account.html" class="list-group-item"> 我 的 收 货 地 址 </a> 
</div> 
</div> 
</div> 








生成 的 效果 如 图 11.13 所 示 。 
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图 11.13 ”增加 左 侧 菜单 项 的 购买 单 页 面 
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XE XL— ^^ thumbnail 样式 的 <div> 标 签 ， 在 中 间 插 入 另 一 个 Tow 样式 名 的 <div> 标 签 。 
之 后 ， 添 加 产品 名 、 订 单数 量 、 价 格 、 订 购 按钮 及 最 新 的 产品 评论 。 
产品 代码 如 下 : 


<div class="col-md-9"> 
<h3>Orders Status</h3> 
<div class="thumbnail"> 
<div class="row"> 
<div class="col-sm-1"> 
<img class-"img-responsive" src="holder.js/35x30" alt-"" /> 
</div> 
<div class="col-sm-4"> 
<a hre 全 "producthtml"> 产 品名 称 </a> 
</div> 
<div class="col-sm-1">1</div> 
<div class="col-sm-2">$49.99</div> 
<div class="col-sm-2"> 
<button class="btn btn-sm btn-default"> 跟 踪 订 单 </button> 
</div> 
<div class="col-sm-2"><a href="#">1 信息 </a></div> 
</div> 
</div> 
</div> 


生成 效果 如 图 11.14 所 示 。 








管理 订单 


管理 反馈 
PESOS 
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1L14 添加 产品 数量 后 的 效果 


当前 有 一 个 单行 的 产品 订单 选项 ， 复 制 这 行 代码 5 次 。 通 过 修改 不 同 的 数量 、 价 格 和 | 
最 新 的 评论 数 作为 区 别 。 代 码 如 下 : | 


<div class="thumbnail"> 
<div class="row"> 
<div class="col-sm-1"> 
<img class-"img-responsive" src=" holder.js/35x30" alt=" /> 
</div> 
<div class="col-sm-4"><a hre 全 "producthtml"> 产 品名 称 </a></div> 
<div class="col-sm-1">1</div> 
<div class="col-sm-2">$39.99</div> 
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| <div class="col-sm-2"> 
| <button class="btn btn-sm btn-danger"> 取 消 订 单 </button> 

</div> 

<div class="col-sm-2"><a href="#">0 Messages</a></div> 

</div> 
</div> 


| <div class="thumbnail"> 
Ne 1 <div class="row"> 


<div class="col-sm-1"> 
<img class="img-responsive" src=" holder.js/35x30" alt=" /> 
</div> 
<div class="col-sm-4"><a href="product.html"> 产 品名 称 </a></div> 
<div class="col-sm-1">1</div> 
<div class="col-sm-2">$49.99</div> 
| <div class="col-sm-2"> 
| «button class="btn btn-sm btn-default"> 跟 踪 订单 </button> 
</div> 
| <div class="col-sm-2"><a href="#">1 Message</a></div> 
| </div> 
| </div> 
<div class="thumbnail"> 
<div class="row"> 
<div class="col-sm-1"> 
<img class-"img-responsive" src=" holder.js/35x30" alt=" /> 
</div> 
<div class="col-sm-4"><a href="product.html"> 产 品名 称 </a></div> 
| <div class="col-sm-1">1</div> 
<div class="col-sm-2">$19.99</div> 
| <div class="col-sm-2"> 
| <button class="btn btn-sm btn-success"> 完 成 订单 </button> 
| </div> 
| «div class="col-sm-2"><a href="#">1 Message</a></div> 
| </div> 
| </div> 
<div class="thumbnail"> 
«div class="row"> 
| <div class="col-sm-1"> 
| <img class="img-responsive" src=" holder.js/35x30" alt=" /> 
</div> 
<div class="col-sm-4"><a href="product.html">Product Name</a></div> 
<div class="col-sm-1">1</div> 
<div class="col-sm-2">$49.99</div> 
<div class="col-sm-2"> 
<button class="btn btn-sm btn-default"> 跟 踪 订 单 </button> 
</div> 
<div class="col-sm-2"><a href="#">1 Message</a></div> 
</div> 
</div> 


执行 代码 ， 最 终 的 效果 如 图 11.15 所 示 。 
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图 11.15 添加 订单 数量 列表 


最 后 添加 翻 页 标签 ， 用 .pagination 样式 以 便 网 站 用 户 可 以 切换 到 下 一 页 或 固定 页 面 。 
代码 如 下 : 


<div class="col-sm-12 center"> 
<ul class="pagination"> 
<li class="disabled"><a href="#">&laquo:</a></li> 
<li class="active"><a href="#">1</a></li> 
<li><a href="#">2</a></li> 
<li><a href="#">3</a></li> 
<li><a href="#">4</a></li> 
<li><a href="#">5</a></li> 
<li><a href="#">&raquo:</a></li> 
<ul> 
</div> 


执行 代码 ， 生 成 效果 如 图 11.16 所 示 。 
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图 11.16 订单 页 面 完成 效果 
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| 11.3 设计 列表 页 category.html 
& 


j 与 buyhtml 页 面 一 样 , categoryhtml 页 面 也 从 最 初 的 头 部 与 底部 版 权 块 开始 , 如 图 11.17 
二 
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图 11.17 category.html 初始 页 面 


| 产品 列表 页 与 index 类 似 ， 只 是 没有 Banner 切换 ， 把 一 样 的 代码 复制 过 来 ， 并 且 添 加 
| 页 面 标签 ， 效 果 如 图 11.18 所 示 。 





所 有 商品 分 类 











图 11.18 category.html 页 面 完 成 效果 


11.4. 设计 产品 详情 页 product.html 


与 categoryhtml 页 面 类 似 ， 在 左 侧 创建 目录 菜单 ， 效 果 如 图 11.19 Ara. 
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图 11.19 产品 页 面 初始 效果 


假如 想 在 这 个 页 面 添加 特殊 产品 ， 在 开始 时 就 要 为 产品 定义 一 定 的 宽度 。 在 这 个 案例 | 
中 ， 定 义 .col-md-9 样式 作为 放置 产品 的 区 域 , 意味 着 产品 详情 在 页 面 的 右 侧 。 然 后 定义 产 | 
品 缩 略图 样式 .thumbnail,， 下 一 步 , 放 入 4 个 不 同 图 片 用 同样 的 .thumbnail 样式 。 代 码 如 下 : 


<div class="col-md-9"> 
<div class="thumbnail"> 
<div class="row"> 

<div class="col-sm-6"> 
<img class-"img-responsive" src="holder.js/500x300"" alt="" /> 

<div class="thumbnails row"> 

<div class="col-xs-3"> 
<a href="#"> 
<img src-"holder.js/100x80"" alt="" class="img-thumbnail img-responsive" /></a> 

</div> 

<div class="col-xs-3"> 
<a href="#"> 
<img src-"holder.js/100x80"" alt="" class="img-thumbnail img-responsive" /></a> 

</div> 

«div class="col-xs-3"> 
<a href="#"> 
<img src-"holder.js/100x80"" alt="" class="img-thumbnail img-responsive" /></a> 

</div> 

<div class="col-xs-3"> 
<a href="#"> 
<img src-"holder.js/100x80"" alt="" class="img-thumbnail img-responsive" /></a> 

</div> 

</div> 
</div> 
</div><!--/col-md-9--> 


执行 代码 ， 生 成 效果 如 图 11.20 所 示 。 | 
在 右 侧 添加 产品 简短 的 描述 。 代码 中 , 已 经 定义 了 .col-sm-6 样式 来 确定 其 所 占 的 空间 。 ， 
添加 代码 在 <!--/.col-md-9--> 结 束 之 前 。 | 
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图 11.20 产品 缩 略图 
代码 如 下 : 


<div class="col-sm-6"> 
<h4 class="pull-right">$24.99</h4> 
<h4><a hre 仁 "product.html"> 产 品名 称 </a></h4> 
<p> 苏 泊 尔 (SUPOR) 电压 力 锅 高 压 锅 CYSB50FCW20QJ-100 ERE </p> 
</div> 


执行 代码 ， 生 成 效果 如 图 11.21 所 示 。 


Categories 














图 11.21 产品 价格 


写 一 个 表单 代码 ， 以 方便 用 户 选 择 订 购 产 品 颜色 、 产 品 数量 和 尺寸 ， 当 然 别 忘 了 添加 


“联系 卖家 ”和 “添加 到 购物 车 ”按钮 ， 在 <p> 标 签 之 后 ， 样 式 名 为 .col-sm-6<div> 标 签 结 
束 之 前 。 


代码 如 下 : 


<form role="form"> 
<div class="number form-group"> 
<label class="control-label" for="number">Number</label> 


<input type-"number" class="form-control input-sm" id="number" /> 
</div> 


<div class="form-group"> 
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<label>Color</label> 
<select id="color"> 
<option name="color">Blue</option> 
<option name="color">Green</option> i 
<option name="color">Red</option> | ar) 
<option name="color">Yellow</option> aom 
</select> 
E 
<div class="form-group"> | 
<label>Size</label> | 
<div class="btn-group"> 
«button type="button" class="btn bin-default">XS</button> 
«button type="button" class="btn btn-default">S</button> 
<button type="button" class="btn btn-default">M</button> 
<button type="button" class="btn btn-default">L</button> 
<button type="button" class="btn btn-default">XL</button> 
</div> 
</div> 
<div class="form-group"> 
<button type="submit" class="btn btn-default"> 联 系 商家 </button> 
«button type="submit” class="btn btn-success"> 添 加 到 购物 车 </button> 
</div> 
</form> 


执行 代码 ， 生 成 效果 如 图 11.22 所 示 。 
EE 于 aa 


Categories 














图 11.22 产品 型 号 选择 


添加 产品 细节 描述 ， 当 然 也 定义 查看 数量 区 块 。 笔 者 推荐 评级 数 用 Glyphicons enm 
级 查看 。 用 .wells 样式 创建 阴影 空间 ， 以 便于 容纳 留言 内 容 。 代 码 如 下 : 


<div class="description"> | 
<p> 年 终 爆 款 秒杀 价 ， 数 量 有 限 。 苏 泊 尔 (SUPOR) 电压 力 锅 高 压 锅 ， 年 终 爆 款 秒杀 价 ， 数 量 有 | 
限 。 苏 泊 尔 (SUPOR) 电 压力 锅 高 压 锅 </p> i 
<p> 年 终 爆 款 秒杀 价 ， 数 量 有 限 。 苏 泊 尔 SUPOR) 电压 力 锅 高 压 锅 .……</p> | 
<p> 年 终 爆 款 秒杀 价 ， 数 量 有 限 。 苏 泊 尔 (SUPOR》 电 压力 锅 高 压 锅 ， 年 终 爆 款 秒杀 价 …...</p> | 

</div> 
<div class="ratings"> 
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<p class="pull-right">3 reviews</p> 
p 
<span class="glyphicon glyphicon-star"></span> 
<span class="glyphicon glyphicon-star"></span> 
<span class="glyphicon glyphicon-star"></span> 
<span class="glyphicon glyphicon-star"></span> 
<span class="glyphicon glyphicon-star-empty"></span> 
4.0 stars 
</p> 
</div> 
<div class="well"> 
<div class="text-right"><a class="btn btn-success"> 添 加 评论 </a></div> 
</div> 


执行 代码 ， 生 成 效果 如 图 11.23 所 示 。 


Categories 
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图 11.23 产品 描述 
添加 一 些 评论 以 平衡 页 面 , 并 且 让 它 看 起 来 更 像 真实 网 页 。 所 以 需要 添加 如 下 的 代码 : 


«div class="row"> 
<div class="col-md-12"> 
<span class="glyphicon glyphicon-star"></span> 
<span class="glyphicon glyphicon-star"></span> 
<span class="glyphicon glyphicon-star"></span> 
<span class="glyphicon glyphicon-star"></span> 
<span class="glyphicon glyphicon-star-empty"></span> 
<span class="pull-right">1 天 前 </span> 
<p> 位 于 <em> 上 海 </em></p> 
<p>T 买 了 很 多 东西 都 非常 满意 很 好 的 卖家 我 的 折扣 卡 升 到 顶级 了 吧 !!</p> 
</div> 
</div> 
<hr> 
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<div class="row"> | 
<div class="col-md-12"> i 
<span class="glyphicon glyphicon-star"></span> | 

<span class="glyphicon glyphicon-star"></span> 

<span class="glyphicon glyphicon-star"></span> 

<span class="glyphicon glyphicon-star"></span> 


<span class="glyphicon glyphicon-star-empty"></span> | Note 
Cherie Note 


<span class-"pull-right"»2 天 前 </span> 
<p> 位 于 <em> 江 西 <em></p> 
<p> 我 想 再 订 一 条 ， 有 折扣 吗 ? </p> 
</div> 
</div> 
<hr> 
«div class="row"> 
<div class="col-md-12"> 
<span class="glyphicon glyphicon-star"></span> 
<span class="glyphicon glyphicon-star"></span> 
<span class="glyphicon glyphicon-star"></span> 
<span class="glyphicon glyphicon-star"></span> 
<span class="glyphicon glyphicon-star-empty"></span> 
Jack Hale 
<span class-"pull-right"5 天 前 </span> 
<p> 位 于 <em> 浙 江 </em></p> | 
<p> 衣 服 还 不 错 ， 这 个 价格 还 值 ， 大 小 正好 , R158, 105 斤 ， 穿 工 码 正好 , 会 常 来 的 , 谢 ! </p> | 
</div> | 
</div> | 
在 实际 的 项 目 中， 在 电 商 网 站 上 ， 需 要 推荐 一 些 类 似 产 品 或 其 他 相关 商品 ， 与 产品 展 ， 
示 类 似 ， 可 以 嵌入 设计 项 目 。 代 码 如 下 : | 


<br><hr><hr> 
<div class="row"> 

<div class="col-sm-12"><h3> 你 可 能 喜欢 的 商品 </h3></div> 

<div class="col-sm-6 col-md-4"> 

<div class="thumbnail"> 
<img src="http://placehold.it/750x600" alt=""> 
<div class="add-to-cart"> 
<a href="#" class="glyphicon glyphicon-plus-sign" 
data-toggle="tooltip" data-placement="top" title-"Add to cart"></a> 








</div> 
<div class="caption"> 
<h4 class="pull-right">$84.99</h4> | 
<h4><a href="product.html">1<sup>st</sup> Product</a></h4> | 
<p> 年 终 爆 款 秒杀 价 ， 数 量 有 限 。 苏 泊 尔 (SUPOR) 电压 力 锅 高 压 锅 ， 年 终 爆 ， 
款 秒 </p> | 
<div class="ratings"> ! 
<p class="pull-right"><a href="product.html#comments">6 reviews</a></p> 
ps 


«span class="glyphicon glyphicon-star"></span> 


<span class="glyphicon glyphicon-star"></span> | 
<span class="glyphicon glyphicon-star"></span> i 
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<span class="glyphicon glyphicon-star-empty"></span> 
<span class="glyphicon glyphicon-star-empty"></span> 
«p 
</div> 
</div> 
</div> 
</div> 


<div class-"col-sm-6 col-md-4"> 

<div class="thumbnail"> 

<img sre="http://placehold.it/750x600" alt=""> 

<div class="add-to-cart"> 

<a href="#" class="glyphicon glyphicon-plus-sign" data-toggle-"tooltip" data-placement="top" title= 


| "Add to cart"></a> 


</div> 

<div class="caption"> 

<h4 class="pull-right">$94.99</h4> 

<h4><a href="product.html">2<sup>nd</sup> Product</a> 

</h4> 

<p> 年 终 爆 款 秒杀 价 ， 数 量 有 限 。 苏 泊 尔 (SUPOR) 电压 力 锅 高 压 锅 ， 年 终 爆 款 秒 </p> 
<div class="ratings"> 

<p class="pull-right"><a href="product.html#comments">18 评论 </a></p> 
<p> 

<span class="glyphicon glyphicon-star"></span> 

<span class="glyphicon glyphicon-star"></span> 

<span class="glyphicon glyphicon-star"></span> 

<span class="glyphicon glyphicon-star"></span> 

<span class="glyphicon glyphicon-star-empty"></span> 

</p> 

</div> 

</div> 

</div> 

</div> 


<div class="col-sm-6 col-md-4"> 

«div class="thumbnail"> 

<img src="http://placehold.it/750x600" alt=""> 

<div class="add-to-cart"> 

<a href="#" class="glyphicon glyphicon-plus-sign" data-toggle="tooltip" data-placement="top" title= 


| Add to cart"></a> 


</div> 

<div class="caption"> 

<h4 class="pull-right">$54.99</h4> 

<h4><a href="product.html">3<sup>rd</sup> Product</a> 

</h4> 

<p> 年 终 爆 款 秒杀 价 ， 数 量 有 限 。 苏 泊 尔 (SUPOR) 电压 力 锅 高 压 锅 ， 年 终 爆 款 秒 </p> 
<div class="ratings"> 

<p class="pull-right"><a href="product.html#comments">56 评论 </a></p> 
ba 

<span class="glyphicon glyphicon-star"></span> 

<span class="glyphicon glyphicon-star"></span> 
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生成 效果 如 图 11.24 所 示 。 
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<span class="glyphicon glyphicon-star"></span> 

<span class="glyphicon glyphicon-star"></span> 

<span class="glyphicon glyphicon-star-empty"></span> 
</p> 


</div> | / 
</div> | EA 
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图 11.24 相关 产品 推荐 | 
从 组 织 编写 代码 到 输出 效果 , 相关 推荐 的 产品 用 相同 的 样式 名 , 推荐 选择 col-sm-6 col-md-4 i 


样式 ， 至 于 该 为 哪个 产品 设置 更 宽 的 样式 ， 完 全 取决 于 想 展示 哪个 产品 当主 打 产品 。 


在 实现 代码 阶段 ， 链 接 产 品 到 producthtml 页 面 。 通 过 单 击 产品 到 相关 的 页 面 ， 用 户 | 


可 以 直接 看 到 一 样 的 产品 页 面 。 在 最 初 的 项 目 中 ， 用 户 能 链接 产品 到 他 们 感 兴趣 的 页 面 。 


本 章 总 结 


本 章 带 领 读者 完成 了 一 次 愉快 的 网 站 搭建 之 旅 ， 相 信 读 者 也 领略 到 了 在 实际 开发 中 应 | 


用 Bootstrap 快速 搭建 网 站 的 威力 。 


“无 他 ， 唯 手 熟 尔 ”， 这 个 道理 同样 也 适用 于 学 习 编码 。 要 想 创 建 完美 的 作品 ， 需 要 | 


AWA. Bootstrap 技能 学 习 得 越 多 ， 就 会 发 现 还 有 更 多 的 要 学 ， 在 学 习 过 程 中 ， 也 希望 | 
读者 能 够 举一反三 ， 以 后 再 遇 到 其 他 前 端 UI 框架 都 可 以 迅速 掌握 ， 而 且 可 以 开发 出 自己 | 
的 前 端 UI HEAR. | 
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本 章 作业 


完成 如 图 11.25 所 示 的 电 商 页 面 。 
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至 此 ,相信 读者 已 经 能 够 熟练 使 用 Bootstrap 框架 ,并 体验 到 了 Bootstrap 的 强悍 之 处 。 
Bootstrap 框架 所 提供 的 功能 很 强大 ， 希 望 读者 能 熟练 使 用 ， 以 便 能 随心 所 欲 地 设计 页 面 。 

在 实际 开发 中 ， 如 果 一 些 代 码 遵循 一 定 的 使 用 模式 ， 并 在 开发 中 反复 应 用 ， 可 以 把 这 
些 代码 添加 到 Bootstrap 扩展 中 ， 以 便 扩 展 自己 的 代码 库 。 当 然 ， 前 提 是 开发 者 已 熟练 掌 
握 Bootstrap 源 代码 ， 并 能 把 握 其 设计 思路 和 内 核 结构 。 

本 章 将 从 Bootstrap 应 用 阶段 上 升 到 源 代码 分 析 阶段 ， 解 读 Bootstrap 设计 原理 ， 为 
Bootstrap 二 次 开发 打 好 基础 。 


EE 
掌握 Bootstrap 设计 原理 ， 为 Bootstrap 二 次 开发 打 好 基础 。 
| 本 章 技能 目标 


定义 jQuery 插件 。 

Bootsrtap 设计 思想 。 
Bootstrap 框架 解析 。 
Bootstrap 内 核 解疑 。 


(feu 


> Bootstrap 框架 为 什么 要 采用 12 列 栅 格 系统 ? 


v 


» 
> 
> 
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av 
> 什么 是 类 型 化 样式 ? 
> Bootstrap 插件 和 jQuery 插件 在 结构 设计 上 有 何不 同 ? 
12.1 Bootstrap 设计 思想 


Bootstrap 是 一 个 前 端 开发 工具 集 ， 实 际 上 它 更 多 的 是 一 个 CSS 框架 ， 提 供 了 一 套 易 


| 用、 灵活、 可 扩展 的 样式 库 ， 内 容 包 含 了 构建 基本 Web 应 用 程序 所 需 的 基本 组 件 ， 思 路 清 
| 晰 ， 样 式 精 美 ， 值 得 前 端 开 发 人 员 学习 和 借鉴 。Bootstrap 整体 架构 分 为 栅 格 系统 、 基 本 样 
| XX. CSS 组 件 、JavaScript 插件 4 大 部 分 ，Bootstrap 所 有 的 表现 形式 都 是 构建 在 这 4 部 分 
| ZEN. 


12.1.1 12 BMRB 


栅 格 系统 的 实现 原理 为 : 通过 定义 容器 大 小 ， 平 分 12 份 ， 再 调整 内 外 边 距 ， 最 后 再 


| 结合 媒体 查询 ， 就 制作 出 了 强大 的 响应 式 的 栅 格 系统 。 其 特点 如 下 : 


E) 一 行 数据 (row) 必须 包含 在 .container 中 ， 以 便 为 其 赋予 合适 的 对 齐 方式 和 内 
边 距 。 
E] ”使 用 行 Gow) 在 水 平方 向 上 创建 一 组 列 (column)。 
E) ”具体 内 容 应 当 放 置 于 列 〈column) A, MERAJ) Column) 可 以 作为 行 (row) 
的 直接 子 元 素 。 
加 ”使 用 像 row 和 .col-xs-4 这 样 的 样式 来 快速 创建 栅 格 布局 。 
E] ”通过 设置 列 padding 从 而 创建 列 (column) 之 间 的 间隔 。 然 后 通过 为 第 一 列 和 最 
后 一 列 设置 负 值 的 margin 从 而 抵消 掉 padding 的 影响 。 
YM ” 栅 格 系统 中 的 列 是 通过 指定 1 一 12 的 值 来 表示 其 跨越 范围 的 。 
以 上 特点 可 以 与 源码 对 照 ， 进 行 查看 。 
/源码 1584 4T 
.container { 
padding-right: 15px: 
padding-left: 15px: 
margin-right: auto:/* 左 右 居中 的 设置 */ 
margin-left: auto: 


} 
// 源 码 1615 行 
TOW { 
margin-right: -1 5px: 
margin-left: -15px: 


} 
/源码 1615 4r 
.col-xs-1, ... .col-Ig-12 { 
position: relative: 
min-height: 1px: 
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$12 £4 Bootstrap & 85 ) ) | 
padding-right: 15px: | 
padding-left: 15px: 


从 源码 中 可 以 看 出 ， 容 器 〈container) 随 着 屏幕 宽度 变化 而 变化 ， 为 布局 提供 整体 页 | ar) 
面 宽 度 限 制 ， 而 列 〈column) 的 宽度 是 基于 整体 页 面 百 分 比 的 。 行 (row) 是 列 (column) ~~ 
的 外 层 容器 ，row 中 最 多 只 能 放 12 个 column。container 左右 有 15px 的 padding， 而 row 
左右 有 -15 的 maingin, 刚 好 抵消 父 容器 container fff] padding. column 左右 有 15px 的 padding，， 
位 于 页 面 两 边 的 column 有 15px 的 padding， 可 以 使 内 容 不 会 紧 挨 着 边界 ， PRE MEG | 
column 内 容 之 间 有 了 30px 的 间距 CHD. 


注意 : 栅 格 系统 中 ， 列 偏 移 (offset) 功能 不 再 定义 margin 值 ， 使 用 .col-md-offset-* 形 AH | 
样式 就 可 以 将 列 偏 移 到 右 侧 。 通过 列 排序 (push 与 pull) 功能 可 以 改变 列 的 方向 , 也， 
就 是 改变 左右 浮动 ， 并 且 设置 浮动 的 距离 。 通 过 push 推 和 pul 拉 ， 本 质 是 通过 let | 
P right 来 改变 位 置 。 | 


在 栅 格 系统 中 , 根据 宽度 将 浏览 器 分 为 4 种 , 其 值 分 别 是 自动 (100%)、750px、970px、 | 
1170px， 对 应 的 样式 为 超 小 (xs)、 小 型 (sm)、 中 型 屏幕 (md), KÆ Cig). ARE, Æ 
通过 媒体 查询 定义 最 小 宽度 实现 ， 所 以 向 大 兼容 ， 向 小 不 兼容 。 


12.1.2 ”样式 类 型 化 


Bootstrap 样式 类 型 化 设计 是 样式 优化 最 有 效 的 途径 之 一 , 类 型 化 设计 也 是 抽象 化 编程 | 
思想 的 应 用 。 当 所 有 类 汇集 在 一 起 ， 通 过 一 定 的 逻辑 组 织 在 一 起 时 ， 就 形成 了 类 库 。 | 
在 bootstrap.css 文档 中 ,读者 会 发 现 样式 类 与 标签 样式 构成 了 全 部 样式 ,但 是 Bootstrap | | 
并 没有 大 量 重 置 标签 默认 样式 ， 仅 对 个 别 浏览 器 解析 存在 差异 的 标签 进行 样式 统一 ， me 
对 于 一 些 标签 缺陷 样式 进行 修补 ， 以 实现 标准 化 视觉 设计 要 求 。 
Bootstrap 大 量 地 使 用 样式 类 ， 尽 量 避 免 破坏 标签 默认 样式 ， 这 是 Bootstrap 的 设计 准 | 
则 。 例 如 针对 表格 样式 ，Bootstrap 没有 直接 对 table 元 素 进行 重 置 ， 而 是 通过 .table 类 对 表 
格 样式 标准 化 ， 然 后 在 .table 类 下 面 又 发 展 很 多 子 类 。 代 码 如 下 : | 
/源码 2236 4T 
table { 
width: 100%: 
max-width: 100%; 
margin-bottom: 20px: 
H 
.table th, 
table td [) 
able th{} 
table thead th {} 
table tbody + tbody () 
stable .table {} | 
这 种 简单 的 CSS 类 功能 增加 了 Bootstrap 的 灵活 性 ， 使 其 在 网 页 中 广泛 应 用 ， 为 CSS | 
样式 的 抽象 性 提供 了 一 种 选择 。 样 式 类 的 定义 方法 很 简单 ， 但 是 设计 好 一 套 比较 实用 的 类 | 


equ. 


n ea Keer hh KARARKA 
| 库 就 很 不 容易 了 。Bootstrap 在 设计 时 遵循 的 基本 原则 如 下 。 
| (D CSS 的 类 应 体现 最 小 化 效果 设计 原则 。 这 样 就 能 够 更 灵活 地 应 用 样式 类 。 例 如 ， 
。 在 设计 机 格 系统 时 ， 在 列 类 型 中 仅 指定 宽度 属性 ， 通 用 属性 通过 属性 选择 器 定义 ， 这 样 设 
， 计 的 样式 就 比较 灵活 。 


j -col-md-12 { 
C9 idth: 100% 
| } 
| .col-md-1, ....col-md-12 ( 
float: left; 
} 
| 通过 这 种 方法 ， 用 户 可 以 在 一 个 对 象 中 引用 多 个 样式 类 ， 它 们 的 位 置 顺序 不 会 对 样式 
| 产生 影响 。 注 意 : 如 果 几 个 声明 被 分 开 之 后 ， 没 有 被 重复 利用 的 价值 ， 就 不 应 该 再 分 开 
| x. 
| (2) CSS 类 型 体现 通用 性 。 所 谓 通 用 性 是 指 具备 广泛 的 应 用 价值 。 定 义 类 时 除了 应 
| 该 尽 可 能 定义 小 的 样式 单元 ， 还 应 该 保证 所 定义 的 类 具有 代表 性 。 例 如 ， 下 面 的 类 型 是 页 
面 中 经 常用 到 的 基本 样式 ， 因 此 可 以 把 它们 独立 出 来 进行 设计 。 
.pull-right { float: right !important; } 
.pull-left ( float:left !important:; } 
| chide (display: none 'important:] 
| show ( display: block !important; } 
invisible { visibility: hidden: } 
| G) 当 定 义 CSS 类 库 时 ， 要 遵循 规律 ， 如 在 命名 样式 时 要 有 规律 ， 这 样 在 使 用 和 参 
| 阅 时 也 可 以 快速 浏览 。 例 如 ， 有 关 按 钮 样式 类 的 定义 中 ， 通 过 bin 前 缀 ， 把 所 有 与 按钮 相 
| 关 的 样式 统一 起 来 ， 这 样 能 够 方便 使 用 ， 也 方便 管理 。 


| 12.13 ”代码 松散 与 耦合 的 处 理 


| Bootstrap 样式 库 具 有 很 强 的 模块 化 设计 特性 ， 没 有 系统 性 ， 代 码 非常 松散 ， 但 是 
| Bootstrap 利用 应 用 体系 把 这 些 松散 的 样式 码 收拢 在 一 起 ， 避 免 CSS 代码 元 余 。 注 意 ， 
| Bootstrap 类 样式 的 体系 主要 通过 LESS 来 设计 ， 用 户 可 以 通过 LESS 源 代码 了 解 其 体系 设 
| 计 思 路 。 
| Bootstrap 根据 页 面 对 象 的 功能 ， 分 门 别 类 地 设计 出 了 多 种 样式 ， 如 按钮 类 、 表 格 类 、 
| 表单 类 、 版 式 、 文 本 代码 、 图 片 等 。 下 面 简单 地 列 出 按钮 类 、 表 格 类 的 基本 样式 类 。 
| bm { 

display: inline-block: 

padding: 6px 12px: 

margin-bottom: 0: 

font-size: 14px: 
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margin-bottom: 20px: 
} 


类 似 的 功能 类 还 有 很 多 ， 读 者 可 以 查看 bootstrap.css 源 代码 。 | 
12.1.4 ”继承 可 扩展 性 aA 


CSS 的 继承 性 体现 在 结构 关系 上 ， 且 与 属性 本 身 存在 很 大 联系 ， 这 与 编程 语言 中 的 继 
承 性 有 很 大 不 同 。CSS 所 定义 的 100 多 种 属性 中 ， 只 有 一 部 分 具有 继承 性 ， 而 不 是 全 部 都 | 
有 具有 继承 性 。 具 体 来 讲 ， 拥 有 继承 性 的 属性 包括 如 下 几 大 类 : 
字体 属性 。 
文本 属性 〈 个 别 属性 不 支持 继承 ) 。 
表格 属性 〈 个 别 属性 不 支持 继承 ) 。 
列表 属性 。 
打印 属性 《部 分 属性 支持 继承 ) 。 
声音 属性 〈 部 分 属性 支持 继承 ) 。 
鼠标 样式 具有 继承 性 。 

而 盒 模型 、 布 局 、 定 位 、 背 景 、 轮 廓 和 内 容 等 类 属性 都 不 具备 继承 性 。CSS 继承 的 结 | 
构 性 主要 体现 在 内 部 结构 会 自动 继承 外 部 结构 的 可 继承 属性 。 因 此 ， 当 希望 统一 整个 CSS | 
的 字体 、 字 号 、 字 体 颜色 、 行 高 等 基本 样式 时 ， 不 妨 在 html 和 body 元 素 中 进行 定义 , 然 _ 
后 通过 继承 性 实现 网 页 字体 样式 的 统一 。 

html ( 

font-family: sans-serif: 

-webkit-text-size-adjust: 10096; 
-ms-text-size-adjust: 100%; 


RARRARARRARA 


} 

body {margin:0:} | 

如 果 通 过 继承 性 实现 网 页 样式 的 统一 ， 同 时 又 希望 设计 个 性 化 组 件 样式 ， 可 以 有 两 种 ， 
选择 方法 ， 一 是 为 对 象 或 组 件 单独 定义 样式 ， 二 是 通过 专用 类 进行 设计 。 例 如 ， 在 超 链接 | 
样式 中 ， 页 面 统一 为 蓝 灰 色 、 下 划 线 效果 ， 但 是 在 标签 组 件 中 重 定义 ， 让 其 文本 呈 高 亮 显 | 
示 ， 则 主要 代码 如 下 : 

af 

color: #337ab7: 

text-decoration: none: 


} 

a:hover, 

a:focus ( 
color: #23527c: 
text-decoration: underline; 


a label:hover. 


a.label:focus { 
color: £Hfff; 


“Ie 
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text-decoration: none; 

cursor: pointer: 
} 
| 由 于 CSS 继承 性 ， 所 有 超 链接 的 字体 显示 同样 的 效果 , 但 是 由 于 标签 样式 的 不 同 ， 所 
， 设 置 的 字体 颜色 显示 效果 截然 不 同 。 
如 果 仅 就 特定 组 件 来 说 , 直接 在 组 件 结构 中 进行 定义 会 方便 许多 , 但 是 对 于 CSS 样式 
， 表 来 说 , 使 用 专用 类 来 弥补 CSS 继承 性 是 最 佳 选择 。 因 为 在 一 个 网 站 中 可 能 会 有 多 处 引用 ， 
| 通过 类 的 方式 提炼 这 个 样式 ， 就 能 够 达到 最 优化 应 用 。 
| 类 似 这 样 的 问题 还 有 很 多 ， 例 如 通用 行 高 与 个 别 栏目 的 特殊 行 高 ， 网 页 默认 字体 大 小 
| 与 特定 栏目 的 特殊 字体 大 小 等 。 
| Bootstrap 在 设计 思路 上 一 般 遵循 以 下 步骤 ， 
A ”使 用 CSS 继承 性 来 统一 CSS 样式 表 中 的 基本 样式 。 
ED ”对 于 特定 对 象 、 组 件 所 需要 的 特殊 样式 ， 可 以 通过 重 定义 的 方法 来 修正 继承 所 带 

来 的 问题 。 
A ”如 果 某 种 特殊 样式 使 用 比较 普遍 ， 可 通过 定义 特殊 类 的 方式 实现 修正 ， 如 果 这 种 
特殊 样式 使 用 不 是 很 普遍 ， 则 直接 合并 到 组 件 样式 中 ， 避 免 类 的 泛滥 。 

| 在 设计 多 层 包含 关系 的 选择 符 时 ,一定 要 注意 CSS 优先 级 。 当 样式 表 发 生 层 登 时 ， 要 
| 保证 CSS 样式 在 解析 时 不 至 于 出 现 各 种 异常 效果 。 在 包含 选择 符 中 ， 空 格 作为 HTML 结 
| 构 的 路 径 ， 明 确 表明 了 网 页 结构 的 父子 级 别 关 系 。 而 没有 空格 〈 如 divhide) 则 表示 同一 
”级 路 径 , 所 以 没有 空格 表示 HTML 类 自身 所 代表 的 元 素 , 不 过 它 要 比 单独 指定 元 素 名 称 的 
| 优先 级 要 高 ， 读 者 可 以 利用 这 种 关系 来 提高 元 素 的 优先 级 。 
| 在 实际 项 目 开 发 中 , 灵活 使 用 CSS 继承 性 和 包含 关系 , 可 以 设计 出 更 具 灵 活性 的 样式 。 


12.2 Bootstrap 框架 解析 


| 第 12.1 节 针对 Bootstrap 的 CSS 框架 设计 思路 进行 梳理 ， 本 节 将 重点 解析 Bootstrap 
“插件 的 脚本 。Bootstrap 插件 的 编写 规范 值得 开发 者 学 习 ， 尤 其 是 OOP 思想 、 易 维护 性 、 
可 扩展 性 和 其 他 设计 模式 在 插件 开发 过 程 中 的 体现 。 

| Bootstrap 内 置 插 件 也 体现 了 松 耦 合 性 , 每 个 插件 都 是 一 段 独立 的 代码 和 一 个 封闭 的 作 
| 用 域 , 互 不 干扰 .下 面 结 合 按钮 插件 的 源 代码 进行 分 析 。 虽 然 bootstrap-button.js 是 Bootstrap 
中 最 简单 的 插件 ， 但 是 麻雀 虽 小 ， 五 脏 俱全 ，bootstrap-button_js 仍然 反映 了 Bootstrap 插件 
| 编写 的 一 些 基本 规范 。 


(1224 源码 结构 


| bootstrap-button.js 插件 是 基于 jQuery 的 扩展 插件 ， 可 为 HTML 原生 的 button 按钮 扩 
， 展 一 些 简 单 功能 。 读 者 应 该 比较 熟悉 按钮 插件 ， 只 要 向 <button> 标 签 添加 一 些 额 外 的 data 
| 属性 ， 就 能 实现 当 单 击 按钮 时 出 现 loading 文字 以 及 模拟 复 选 和 单 选 等 功能 。 
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bootstrap-button js 源码 的 主体 结构 如 下 (具体 功能 代码 请 参阅 bootstrap-button js 源 文件 ): | 


+function ($) { 
"use strict"; //jshint 








// BUTTON PUBLIC CLASS DEFINITION | ar) 
Il i 一 一 
var Button = function (element, options) { /*some code*/ } i 
Button.DEFAULTS = { /*some code*/ } 


Button.prototype.setState = function (state) {£ /*somecode*/ } 
Button.prototype.toggle = function () { /*some code*/ } 

this. Selement.toggleClass(‘active') 
} 
// BUTTON PLUGIN DEFINITION 
一 一 一 = 一 一 一 一 = 一 一 一 一 一 
var old = $.fn.button 

$.fn.button = function (option) { /*some code*/ } 

$.fn.button.Constructor = Button 
// BUTTON NO CONFLICT 
de 
$.fn.button.noConflict = function () ( /*some code*/ } 
// BUTTON DATA-API 
/二 一 一 = 一 一 一 一 

$(document).on(‘click.bs.button.data-api’, '[data-toggle^-button]', function (e) { 
/*some code*/ 

») 

与 jQuery 插件 一 样 ，Bootstrap 定义 一 个 匿名 函数 ， 并 将 jQuery 作为 函数 参数 传递 进 ， 
来 执行 。 这 样 就 可 以 在 闭 包 中 定义 私有 函数 而 不 破坏 全 局 的 命名 空间 ， 而 把 JavaScript 插 | 
件 写 在 一 个 相对 封闭 的 空间 ， 并 开放 可 以 增加 扩展 的 地 方 ， 将 不 可 以 修改 的 地 方 定义 成 私 | 
有 成 员 的 属性 或 方法 ， 以 遵循 “ 开 闭 原则 ” 

!funcrtion($) { 

/代码 

} (windowjQuery) | 

其 中 ，!finction0{}0 是 匿名 函数 的 一 种 写法 ， 它 与 function0{}0 的 写法 区 别 不 大 。 类 | 
似 的 ， 还 有 +function0f}0、- function) {}Q. ~ fonction0 人 0 等 ， 只 是 返回 值 不 同 而 已 。 

匿名 函数 内 的 代码 构成 包括 以 下 4 部 分 。 

回 PUBLIC CLASS DEFINITION: 类 定义 ， 定 义 了 插件 构造 方法 类 及 方法 。 

M PLUGIN DEFINITION: 插件 定义 ， 这 里 才 是 实现 插件 的 地 方 。 

E] PLUGIN NOCONFLICT: 插件 命名 冲突 解决 。 

回 DATA API: 数据 接口 。 


12.22 类 定义 
插件 类 通过 下 面 的 构造 方法 来 实现 : 


var Button = function (element. options) f 
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this.$element = $(element): 
this.option = $.extend({}.$.fn.button.defaults, options): 
| } 
ay) | 这 种 设计 方法 体现 了 JavaScript 的 OOP 思想 : 定义 一 个 类 的 构造 方法 ， 然 后 再 定义 类 
NA 的 方法 〈 属 性 )， 这 样 new 出 来 的 对 象 类 的 具体 实现 ) 就 可 以 调用 类 的 公共 方法 和 访问 
类 的 公共 属性 。 在 Button 函数 内 部 定义 的 属性 和 方法 可 以 看 作 是 类 的 私有 属性 和 方法 , 为 
| Button prototype 对 象 定义 的 属性 和 方法 都 可 以 看 作 是 类 的 公共 属性 和 方法 。 这 个 类 封装 了 
“插件 对 象 初始 化 所 需 的 方法 和 属性 。 
| 这 样 通过 下 面 的 方法 就 可 以 定义 一 个 Button 类 型 的 btn 对 象 ， 这 里 的 this 就 是 btn 
| 对 象 本 身 。 
| 代码 var btn-new Button(element,options) 接 受 两 个 参数 : element 和 options, HH, 
| element 是 与 插件 相关 联 的 DOM 元 素 ， 通 过 代码 this.$element=$(element)， 将 element 封 
， 装 成 为 一 个 jQuery 对 象 Selement， 并 由 this(btn) 对 象 的 $element 属性 引用 。 而 options 是 插 
| 件 的 一 些 设置 选项 (参数 配置 对 象 )。 
| $.extend(target[,object1] [,object]) jQuery 工具 函数 ， 它 的 作用 是 将 objectl, +++ 
| objectN 对 象 合并 到 target 对 象 中 。 通 过 代码 this.options = $.extend( {}, $.fn.button.defaults, 
options) 就 可 以 实现 用 户 自 定义 的 options 覆盖 插件 的 默认 options: $.fn.button.defaults 合并 
到 一 个 空 对 象 人 中 ， 并 由 this(btn) 对 象 的 options 属性 引用 。 通 过 构造 方法 ，btn 的 方法 
setState0、toggle0 就 可 以 调用 btn 的 $element 和 options 属性 。 
下 面 再 来 分 析 类 的 方法 定义 。 
1，setState0 方 法 
button.prototype.setState = function (state) { 
var d = 'disabled' 
, $el = this.$element 
, data = $el.data() 
,val = $el.is(input’) ? val : ‘htm!’ 
state = state + 'Text" 
data.resetText || $el.data(‘resetText’, Sel[val]O) 
$el[val](data[state] || this.options[state]) 
// push to event loop to allow forms to submit 
setTimeout(function () { 


state = 'loadingText' ? 
$el.addClass(d).attr(d, d) :$el.removeClass(d).removeAttr(d): 


9 
} 
上 述 代码 中 ，setState (state) 方法 的 作用 是 为 $elementI 添加 loading……，loading…… 
| €$.fn.button.defaults 属性 loading Text 的 默认 设置 。val = $elis(input) ? 'val' : html' 是 为 了 
| 3 X <button> Submit</button> 和 <input type="button" value="submit"> 两 种 写法 。 
| Data.resetText || $el.data('resetText', $el[val]0) 中 ，|| 是 逻辑 或 ， 意 即 || 左 边 的 表达 式 为 true, 
| 则 不 执行 | 右边 的 表达 式 ， 为 false 则 执行 | 右边 的 表达 式 ， 等 价 于 以 下 代码 : 


If(!data.resetText) { 
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Sel.data('resetText', $el[val]O): 
} 


2. toggle0 方 法 


button.prototype.toggle = function () { | ar) 
var Sparent = this. $element.closest(‘[data-toggle="buttons-radio"]') p ee 
ee ay | Note 
-find(' active") ! JNote 
.removeClass('active") | 
this.$element.toggleClass('active") 
} 


在 上 述 代码 中 ，toggle( 方 法 的 作用 是 通过 为 button. 添加 'active' 的 class 来 添加 “已 添 | 
加 ”的 CSS 样式 。 | 


定义 好 插件 的 类 只 是 完成 了 对 插件 的 抽象 ， 即 使 用 属性 和 方法 来 描述 这 个 插件 ， 但 是 |] 
尚未 完成 插件 的 具体 实现 ， 所 以 还 要 通过 定义 jQuery 级 插件 对 象 来 实现 。 | 


12.2.3 插件 定义 


1. 插件 的 jQuery 对 象 级 定义 


插件 的 jQuery 对 象 级 定义 代码 如 下 : 


$.fn.button = function (option) { 
return this.each(function () { 
var $this = $(this) 
, data = $this.data(‘button’) 
, options = typeof option = ‘object’ && option 
if (!data) Sthis.data('button', (data = new Button(this, options))) 
if (option == 'toggle") data.toggle() 
else if (option) data.setState(option) 
D 
} 


上 述 代码 中 ，$. 徊 .button=function0 人 是 在 插件 的 命名 空间 $. 甸 对 象 下 添加 了 button 属 | 

性 ， 使 用 时 就 可 以 通过 $(selector).buttonO 来 调用 插件 。 在 分 析 jQuery 源码 时 ， 会 发 现 这 样 | 

的 架构 : | 
jQuery = function( selector, context ) { 


// The jQuery object is actually just the init constructor ‘enhanced’ 
return new jQuery. fi. init( selector. context, rootjQuery ): 














} 


lese code 
jQuer.fn =jQuery.prototype=  (/*some code*/} 
jQuer.fn.init.prototype = jQuery.fn: | 
从 代码 中 可 以 看 出 ， 每 次 在 使 用 S(selectoD 时 ， 实 际 上 就 是 调用 了 jQuery(selecton 函 数 
一 次 (SH jQuery 的 别名 )， 都 会 返回 一 个 jQuery finit 类 型 的 对 象 ， 每 写 一 次 $(selector) | 
都 会 生成 一 个 不 同 的 jQuery 对 象 。 | 
程序 中 , return this.each(fuction 0 () 38x. jQuery.each 方法 遍历 $(selector) 所 有 DOM 元 i 
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素 ， 然 后 通过 $(this) 将 每 个 遍历 到 的 DOM 元 素 封 装 为 单一 的 jQuery 对 象 ， 其 作用 是 : 对 于 





$(selector) 得 到 的 结果 集 ， 通 过 $(selector).attr('class") 方 法 得 到 的 是 单个 结果 而 不 是 一 组 结果 。 
if (!data) $this.data(‘button', (data=new Button(this,options))) 是 真正 用 到 data=new Button 

(this,options) 的 地 方 ， 整 个 $. 徊 .button 的 作用 就 是 将 每 个 匹配 的 DOM 元 素 的 data- button 属 

性 引用 new Button(this,option) 对 象 ， 并 通过 判断 option 来 调用 toggle0 方 法 或 setState0 方 法 。 
2. 插件 的 默认 设置 定义 


$.fn.button.defaults = { 
loadingText: ‘loading......' 
} 


在 Bootstrap 中 ， 将 插件 的 默认 设置 设计 为 $.fn.button 的 defaults 属性 ， 其 优点 是 给 开 


| 发 者 修改 插件 的 默认 设置 提供 了 方便 , 开发 者 只 需 设置 $.fn.button.defaults={/*some code*/} 
| 就 可 以 改变 插件 的 默认 配置 。 


3 插件 的 构造 器 
在 Bootstrap 按钮 插件 中 ， 通 过 语句 “$.fpn.button.Constructor = Button” 向 开发 者 开放 


| 该 插件 的 构造 方法 类 ， 作 为 $. 徊 .button 的 Constructor 属性 ， 使 得 开发 者 可 以 读 取 插件 的 构 
| 造 方法 类 。 


(12.2.4 ”命名 冲突 的 解决 


解决 的 方法 与 jQuery 相同 ， 用 法 类 似 于 $.noConflict， 即 释放 $.fn.button 的 控制 权 ， 并 


| 重新 为 $.fo.button 命名 。 这 样 做 的 目的 是 为 了 在 解决 插件 名 称 和 其 他 插件 有 冲突 的 情况 。 
| 详细 代码 如 下 ; 


$.fn.button.noConflict = fuction () { 
$.fn.button — old 
return this 
} 


| 12.25 ”数据 接口 


Bootstrap 的 所 有 插件 都 提供 了 Data 接口 ， 这 种 方法 可 以 通过 HIML 标签 属性 来 激活 


| 插件 的 脚本 行为 ， 避 免 开 发 者 编写 JavaScript 代码 。 


在 Bootstrap 按钮 插件 中 ， 可 以 看 到 ， 通 过 此 方法 向 所 有 带 有 data-toggle 的 <button> 标 


| ROBE click 事件 ， 注 意 这 里 用 了 事件 委托 的 写法 。 


«button data-toggle="button">Click Me</button> 


在 插件 源码 中 ， 可 以 看 到 下 面 的 代码 : 


$(document).on('click.button.data-api', '[data-toggle^=button]'. function (e) f 
var $btn = S(e.target) 
if (!Sbtn.hasClass(btn")) $btn = $btn.closest('.btn") 
$btn.button(toggle") 

» 
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上 面 的 代码 通过 委托 的 方式 为 页 面 中 所 有 定义 了 data-toggle="button" 的 属性 定义 事 | 
件 ， 这 样 就 不 用 再 写 $(selectoD button(options) 来 初始 化 插件 ， 只 要 页 面 加 载 ， 插 件 就 自动 
完成 初始 化 。 | 


123 定义 jQuery 插件 


jQuery 允许 开发 人 员 自 定义 jQuery 扩展 功能 ， 并 提供 了 友好 的 接口 。Bootstrap 框架 ， 
也 是 jQuery 的 一 个 扩展 插件 ， 因 此 也 应 该 遵循 jQuery 插件 的 基本 设计 原则 ， 并 保持 相同 | 
用 法 。 | 


12.3.1 jQuery 插件 形式 


FER jQuery 插件 包括 3 种 形式 。 | 
第 一 种 形式 是 把 一 些 常用 或 者 重复 使 用 的 功能 定义 为 方法 ， 然 后 绑 定 到 jQuery WR ， 
上 ， 从 而 成 为 jQuery 对 象 的 一 个 扩展 方法 。 大 部 分 jQuery 插件 都 是 这 种 形式 的 插件 ， | 
Bootstrap 插件 也 不 例外 。 在 使 用 时 ， 可 以 直接 在 jQuery 对 象 上 调用 Bootstrap 方法 ， 将 对 | 
象 方法 封装 起 来 ， 对 通过 jQuery 选择 器 获取 的 jQuery 对 象 进行 操作 ， 从 而 发 挥 jQuery 强 | 
大 的 选择 器 优势 。 | 
第 二 种 形式 是 在 jQuery 上 直接 定义 实用 工具 函数 ， 把 自 定义 的 工具 函数 独立 绑 定 到 | 
jQuery 对 象 上 ， 这 样 做 就 不 能 在 选择 器 获取 jQuery 对 象 上 直接 调用 ， 需 要 通过 jQuery.fn0 | 
或 者 $.fn0 方 式 进行 引用 。 | 
第 三 种 形式 是 开发 者 自 定义 选择 器 ， 以 满足 特定 环境 下 选择 元 素 的 需要 。 


12.3.2 jQuery 插件 规范 


jQuery 开发 团队 制定 了 一 些 jQuery 插件 通用 规则 , 以 为 用 户 创建 一 个 通用 而 可 信 的 环 ， 
境 。 建 议 读者 在 自 定义 插件 之 前 阅读 并 遵守 这 些 规则 ， 确 保 自 定义 插件 与 其 他 代码 整合 时 | 
遵守 这 些 规则 。 这 样 不 仅 能 保证 插件 代码 的 统一 性 ， 还 能 增加 插件 的 成 功 几 率 。 | 

1. 命名 规则 

jQuery.Plug-in name.js | 

其 中 , plug-in name 表示 插件 的 名 称 。 在 该 文件 中 , 所 有 全 局 函数 都 应 该 包含 在 名 为 plug- | 
in name 的 对 象 中 。 如 果 插 件 只 有 一 个 函数 ， 可 以 考虑 使 用 jQueryplug-in_name0 形 式 。 | 

插件 中 的 对 象 方法 可 以 灵活 命名 , 但 是 应 保持 相同 的 命名 风格 。 如果 要 定义 多 个 方法 ，， 
建议 在 方法 名 前 添加 插件 名 前 级， 以 提升 可 读 性 。 不 要 使 用 过 于 简短 、 语 义 含糊 的 缩写 名 | 
和 公共 方法 名 等 ， 这 样 很 容易 与 外 界 的 方法 混淆 ， 从 而 引起 歧义 。 | 

Bootstrap 插件 由 于 是 在 Bootstrap 框架 下 进行 定义 ， 因 而 在 插件 命名 时 ， 没 有 严格 遵 | 
循 jQuery 插件 命名 规则 ， 而 是 遵循 自己 的 一 套 规则 ， 以 bootstrap 为 前 经， 后 面 附 加 功能 | 
名 称 ， 如 bootstrap-affix.js、bootstrap-alert.js 和 bootstrap-button.js 等 。 | 
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YM ”所 有 新 方法 都 附加 到 jQuery. 名 TRE. 
A M ”所 有 新 功能 都 附加 到 jQuery TRE. 
BA | 3. this 指定 


jQuery 插件 内 的 this 应 该 引用 jQuery 对 象 。 
| 让 所 有 插件 在 引用 this 时 ， 知 道 从 jQuery 接收 到 哪个 对 象 。 所 有 jQuery 方法 都 是 在 
| —^ jQuery 对 象 的 环境 中 调用 ， 因 此 函数 体 中 的 this 关键 字 总 是 指向 该 函数 的 上 下 文 ， 即 
| this 此 时 是 一 个 包含 多 个 DOM 元 素 的 伪 数 组 (Object 对 象 )。 但 是 ， 在 插件 函数 内 部 方法 
| 中 ，this 不 再 指 代 当前 jQuery MA, ME jQuery 对 象 中 包含 的 每 一 个 DOM 元 素 的 jQuery 
| 对象。 同样 ， 在 each0 函 数 内 ，this 指 代 的 是 每 个 匹配 的 DOM 元 素 。 因 此， 在 使 用 时 还 必 
| 须 把 this 包装 为 jQuery 对 象 (var $this=$(this)) 才 能 够 正确 使 用 。 代 码 如 下 : 
| $. fh. Alert = function (option) { 

return this.each(function () { 

var $this = $(this), 

data = $this.data(‘alert’) 

if(!data) $this.data(‘alert’, (data = new Alert(this))) 

if(typeof option — 'string) data[option].call($this) 


| » 
| 
4， 选 代 元 素 

使 用 this.each0 迭 代 匹 配 的 元 素 。 
| 插件 应 该 调用 this.each0 来 迭代 所 有 匹配 的 元 素 ， 然 后 依次 操作 每 个 DOM 元 素 。 在 
”this.each0 方 法 体内 ，this 就 不 再 引用 jQuery 对 象 ， 而 是 引用 当前 匹配 的 DOM 元 素 对 象 。 
| 5， 返 回 jQuery 对 象 

插件 应 该 有 返回 值 ， 除 了 特定 需求 外 ， 所 有 方法 都 必须 返回 jQuery 对 象 。 
| 一 般 应 该 返回 当前 上 下 文 环境 中 的 jQuery HR, BI this 关键 字 引 用 的 数组 。 通过 这 种 
| 方式 ， 可 以 保持 jQuery 框架 内 方法 的 连续 行为 ， 即 链 式 语法 。 如 果 破 坏 这 种 规则 ， 就 会 给 
| 用 户 开 发 带 来 诸多 不 便 。 
| 如 果 匹 配 的 对 象 集合 被 修改 ， 则 应 该 通过 调用 pushStack0 方 法 创建 新 的 jQuery 对 象 ， 
| 并 返回 这 个 新 对 象 。 如 果 返 回 值 不 是 jQuery 对 象 ， 则 应 该 明确 说 明 。 
| 6， 语 法 严谨 

插件 中 定义 的 所 有 方法 或 函数 ， 末 尾 都 必须 加 上 分 号 ( 即 “;”)， 以 方便 代码 压缩 。 

7. 区别 jQuery 和 5$ 


在 插件 代码 中 总 是 使 用 jQuery 而 不 是 $。 
| $ 并 不 总 是 等 于 jQuery， 这 一 点 很 重要 。 例 如 ， 语 句 “var JQ-jQuery.noConflict(); ", 
”如 果 将 jQuery 蔡 换 为 $ 别 名 , 就 会 引发 错误 。 另外 ,其 他 JavaScript 框架 也 可 能 使 用 $ 别 名 。 
| 在 复杂 的 插件 中 ， 如 果 全 部 使 用 jQuery 代替 $， 又 会 让 人 难以 接受 这 种 复杂 的 写法 ， 为 了 
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解决 这 个 问题 ， 建 议 使 用 如 下 插件 模式 : 
(function($) { 
/在 插件 包 中 使 用 $ 代 蔡 jQuery | , 
})GQuery): | SA 
该 包装 函数 用 于 接受 一 个 参数 ， 该 参数 传递 的 是 jQuery 全 局 对 象 。 由 于 参数 命名 为 $， 
因此 在 函数 体内 就 可 以 安全 使 用 $ 别 名 ， 而 不 用 担心 命名 冲突 。 ote 


12.3.3 jQuery 插件 封装 


封装 jQuery 的 第 一 步 是 定义 一 个 独立 域 ， 代 码 如 下 : 
(function($){ 
// 自 定义 插件 代码 
DdQuery) /封闭 插件 | 
然后 是 确定 插件 类 型 ， 选 择 创建 方式 。 例 如 ， 创 建 一 个 设置 元 素 字体 颜色 的 插件 ， 则 | 
应 该 创建 jQuery 对 象 方法 。 考 虑 到 jQuery 提供 了 插件 扩展 方法 extend0， 调 用 该 方法 定义 | 
插件 会 更 为 规范 。 | 
(function($) { 
$.extend($. fn, ( //jQuery 对 象 方法 扩展 
/函数 列表 
))GQuery) /封装 插件 


一 般 插件 都 会 接受 参数 ， 用 来 控制 插件 的 行为 。 根 据 jQuery 设计 习惯 ， 可 以 把 所 有 参 | 
数 以 列表 形式 封装 在 选项 对 象 中 。 例 如 ， 对 于 设置 元 素 字体 颜色 的 插件 ， 应 该 允许 用 户 设 | 
置 字体 颜色 ， 同 时 还 应 考虑 如 果 用 户 没 有 设置 颜色 ， 则 应 使 用 默认 色 。 实 现代 码 如 下 : 


(function($) { 
$.extend($.fn. ( 
color: function(options) { // 自 定义 插件 名 称 
var options = $.extend({ /参数 选项 对 象 处 理 
bcolor "white", // 背 景色 默认 值 
feolor: "black" 1/ 前 景色 默认 值 
).options): 
return this.each(function() ( /返回 匹配 的 jQuery X3 
$(this).css("color".option.fcolor): /遍历 设置 DOM 字体 颜色 
S(this).css("backgroundColor".options.bcolor): 
Ð // 遍 历 设置 DOM 背景 颜色 
} 
})(jQuery); // 封 装 插 件 
完成 插件 封装 之 后 ， 应 该 测试 一 下 自 定义 的 color0 方 法 ， 演 示 效 果 如 图 12.1 Pras. 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title></title> 
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a ^ os or KAA KIA 
| XW 
| <script type-"text/javascript" src="bootstrap/js/jquery-1.9.1.js"></script> 
<script type="text/javascript"> 
(function($) { 
^ | $.extend($.fn, { 
SAR color : function(options){ 
i | var options = $.extend(( 
bcolor : "white", 
| fcolor : "black" 
| J.options): 
i return this.each(function() { 
| S(this).css("color", options.fcolor): 
| $(this).css("backgroundColor", options.bcolor); 
| » 
| } 
| » 
J)Query): /封装 插件 
S(function() { 
$("p").color( { 
bcolor : "blue", 
fcolor : "red" 
D: 
| » 
| </script> 
</head> 
<body> 
<p> 段 落 文本 1</p> 
| <p> 段 沙文 本 2</p> 
| <p> 段 落 文本 3</p> 
<p> 段 落 文本 4</p> 
<p> 段 落 文本 5</p> 
<p> 段 落 文本 6</p> 
</body> 
</html> 











图 12.1 封装 jQuery 插件 
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Re K 


本 章 从 Bootstrap 的 设计 开发 者 角度 ， 简 单 分 析 了 Bootstrap 框架 的 应 用 方法 。 这 是 一 ， 


种 模型 组 合 方法 ， 把 一 些 常用 的 模块 固定 化 ， 开 发 者 可 以 直接 调用 其 模块 。Bootstrap 的 思 
路 和 操作 都 非常 简单 | 

Bootstrap 可 以 简化 Web 前 端 开发 流程 ， 闻 省 开发 时 间 与 前 后 端的 沟通 成 本 。 应 用 
Bootstrap 设计 思想 ， 读 者 可 以 组 建 适合 自己 项 目的 Web 前 端 开发 框架 。 


Re 


思考 并 回答 以 下 问题 : 

- Bootstrap 的 整体 架构 分 为 几 部 分 ? 

. Bootstrap 的 颜色 样式 有 哪些 ? 

. Bootstrap 的 尺寸 样式 有 哪些 ? 

Bootstrap 的 状态 样式 有 哪些 ? 

. Bootstrap 的 特殊 样式 有 哪些 ? 

. 开发 项 目 中 引入 Bootstrap 的 优势 是 什么 ? 
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